路由器是网络连接不可或缺的组成部分，如果您对路由器设置和使用感到困惑，本文将为您提供一步一步的操作指南。

本文内容目录一览：

• 1、vue3.0设置路由是修改那个文件
• 2、vue3hooks中使用路由
• 3、Vue-cli-4-路由配置文件，路由进阶，二级路由
• 4、Vue 何时适合用组件？何时适合用路由？
• 5、vue3实践---路由router
• 6、vue项目 动态路由怎么做

vue3.0设置路由是修改那个文件

在余纯Vue3.0中设置路由，需要返洞对两个文件竖世咐进行修改：

1、src/router/index.js：这是Vue3.0中路由的入口文件，在这个文件中可以引入VueRouter并根据需要配置路由规则。具体来说，可以通过`createRouter`函数创建Router实例，并使用`routes`参数来定义路由规则。

2、src/App.vue：这是Vue3.0中的根组件，负责多个页面组件之间的切换。在这个文件中，可以通过``标签来展示当前路由对应的组件内容，并通过``标签来跳转到不同的路由。通过修改这两个文件，就可以实现Vue3.0中的路由设置和跳转。

vue3hooks中使用路由

在使用Vue3hooks中使芹旅亏用路由，首先要先安装vue-router，在main.js中引入，然后嫌神创建一个router实例，并在Vue实例中使用，在需要使用的组件中，使用useRouter获取路由实例，然后就可镇隐以使用路由的API进行操作，比如跳转页面、获取路由参数等。

Vue-cli-4-路由配置文件，路由进阶，二级路由

vue.config.js    是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下图。

@符亮饥号代表src资源目录，在vue.config.js文件中将路径解胡键纳析，path.resolve是拼接路径方法。将@c定义为当前绝对路径

@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改裤没变而改变。

1.路由模式

2.路由元信息

meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据

3.路由守卫

在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user

其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息

router.beforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next

router.AfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from

浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面

安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）

导入：

首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示

然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入

然后在一级路由页面one.vue中写入二级路由页面的router-link导航和router-view

最终效果如下图所示

Vue 何时适合用组件？何时适合用路由？

router:根据不同的地址跳转到不同的页面

一、vue-router的使用

1.下载路由模块 npm vue-router --save

2.在router.js中

先引入路由 import Router from 'vue-router'

接着通过use在vue全桥局局注册使用 Vue.use（Router）

最后将路由表导出 export default new router({ })

3.在main.js中引入路由组件 import router from './router'

4.以参数的形式写到根目录中 在vue实例对象中声明router

5.最后在App.vue的模板中设置路由敏悄让出口 router-view/router-view

二、添加组件步骤：

1.在src的components下添加组件 apple.vue

2.在运拿app.vue的script标签

引入 新添的组件 import apple from './componets/apple'

在data后注册每个组件 components:{apple}

在template标签里用组件名写一个标签apple/apple

3.通过命令npm run dev 运行项目查看组件是否添加成功

三、将组件添加到路由表的步骤：

1.安装路由 npm install vue-router --save

2.将components里的组件引入配置到router.js中

先引入组件 import...

再配置路由路径

3.在main.js中使用router

先引入路由 import...

再在vue实例中指定router

4.在App.vue中模板中添加路由链接 router-link和出口router-view

vue3实践---路由router

具体的项目创建这里就不说了，直接参考官方文档就够了： 安装 | Vue.js (vuejs.org)

不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。

首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级祥轿饥路由。

创建好vue3项目的第帆旁一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网： 安装 | Vue Router (vuejs.org)

然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.

这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：

1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了

2.动画类名发生了一点变谨返化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。

vue项目 动态路由怎么做

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。

大体步骤：拦截路由-后台取到路由-保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

菜单名字menName；

菜单路径menPath；

菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后，

menName --- name

menPath --- path

menuUrl ----components文件

转换时,用到这个此蔽方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件

生成路由表

可以再过滤一遍生成的路由表

下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404

getRouter.push({ path: '*', redirect: '/404', hidden: true });

router.addRoutes(getRouter); //动态添加路由

前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的森饥州第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;

因为可能会有多级菜单，所以会出现children下边嵌套children的情况;

路由是数组格式

实际前端需要的 component是 component: () = import('@/views/content/classify'),

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象

因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件

Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，

ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤

global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜肢李单那边拿到路由，进行渲染

通过本文的介绍，您已经了解了如何正确地设置路由器和Wi-Fi。希望这些技巧能够帮助您更好地管理网络，并确保您的网络安全。