| 路由器是网络连接不可或缺的组成部分，如果您对路由器设置和使用感到困惑，本文将为您提供一步一步的操作指南。本文内容目录一览：1、vue3.0设置路由是修改那个文件2、vue3hooks中使用路由3、Vue-cli-4-路由配置文件，路由进阶，二级路由4、Vue 何时适合用组件？何时适合用路由？5、vue3实践---路由router6、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-viewvue3实践---路由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。希望这些技巧能够帮助您更好地管理网络，并确保您的网络安全。 |
|Archiver|手机版|家电维修论坛
( 蜀ICP备19011473号-4 川公网安备51102502000164号 )
GMT+8, 2025-7-15 11:06 , Processed in 0.121950 second(s), 17 queries .
Powered by Discuz! X3.5
© 2001-2025 Discuz! Team.
