vue |
您所在的位置：网站首页 › vuerouter动态路由权限 › vue |
vue
|
这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战 在vue的项目中，vue-router是我们要经常用到的，这里说一下添加动态路由。 addroutes的使用在v3中，一般用addrouter做动态route 使用规则 router.addRoutes(routes: Array)添加进入的routes以数组的形式，这样我们其实定义非常方便的，如下就可以 export const constantRouterMap: Array = [ { path: '/login', name: 'Login', component: () => import('../views/login/index.vue') }, { path: '/home', name: 'Home', component: () => import('../views/Home.vue') } ] export const asyncRouterMap: Array = [ { path: '/about', name: 'About', component: () => import('../views/About.vue') } ]定义一个静态route的数组和动态route的数组，在通过角色判断的时候，我们把所有的通过对比，将动态route添加到addRoutes中。 v3地址: v3.router.vuejs.org/zh/api/#rou… addRoute在v4中，addRoutes弃用了，现在使用的是addRoute,addRoute的使用和之前的稍有区别。它是添加一条新的路由记录作为现有路由的子路由。 addRoute(parentName: string | symbol, route: RouteRecordRaw): () => void它的数据结构还是之前的一样。 这里做了个例子 从最上面的route中我们能看到，当前只有home和login页面是可以访问的，about是个动态route,在没有添加进去的时候我们访问 这里我们能看到，是没有匹配到的。因此我们需要加载进去，我是通过一个点击事件把route加载进去的 就是之前页面的点击事件 这是home页面 添加route import { defineComponent } from 'vue' import router, { asyncRouterMap } from '@/router/index' export default defineComponent({ setup () { const addRoute = () => { asyncRouterMap.forEach(item => { router.addRoute(item) }) router.push('/about') } return { addRoute } } })然后我们再点击，效果如下 动态route就这么实现了，至于更多的，其实是对路由做比对，在前端做权限管理。 |
【本文地址】
今日新闻 |
推荐新闻 |