vue3前端项目开发,具备纯天然的防止爬虫采集的特征

vue3前端项目开发,具备纯天然的防止爬虫采集的特征！众所周知，网络爬虫可以在网上爬取到一些数据，很多公司，为了自己公司的数据安全，尤其是web端项目，不希望被爬虫采集。那么，您可以使用vue技术开发web前端内容。下面给大家展示的是，黑马程序员的前端项目之一，小兔鲜的前端web项目内容。

如图，我在自己本地借助于vite插件打开了这个项目，在浏览器内浏览到了前端的页面。这个是默认的首页面截图。

<script setup>


</script>
<template>
  <!--一级路由的出口-->
  <RouterView />
</template>
<style scoped lang="scss">

</style>

App.vue作为入口文件，里面可以看见就写了一个路由标签。我们使用到了路由插件，router.，在里面配置好了首页的模版路径。

import { createRouter, createWebHistory } from 'vue-router'
//createRouter：创建router的实例对象
//createWebHistory:创建history模式的路由
import Login from '@/views/login/index.vue'
import Layout from '@/views/layout/index.vue'
import Home from '@/views/home/index.vue'
import Categroy from '@/views/category/index.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    //path和component对应关系
    {
      path:'/',
      component:Layout,
      children:[
        {
          //默认不写内容，就是会跟着一起渲染的
          path:'',
          component:Home
        },
        {
          path:'category',
          component:Categroy
        }
      ]
    },
    {
      path:'/login',
      component:Login
    }
  ]
})

export default router

如图，里面可以看见“/”，对应的组件是Layout组件。

这里需要给大家提个醒，里面还有子组件呢，而且，重点来了，子组件里面有一个是没有写内容的，我加了注释，不写内容，默认就会跟着启动渲染出来的。它对应的组件是home。