addroutes的使用

在v3中，一般用addrouter做动态route

使用规则

router.addRoutes(routes: Array<RouteConfig>)

添加进入的routes以数组的形式，这样我们其实定义非常方便的，如下就可以

export const constantRouterMap: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login/index.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

export const asyncRouterMap: Array<RouteRecordRaw> = [
  {
    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加载进去的

就是之前页面的点击事件

<template>
  <h1>这是home页面</h1>
  <button style="color:blue" @click="addRoute">添加route</button>
</template>

<script lang="ts">
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
    }
  }
})
</script>

然后我们再点击，效果如下

动态route就这么实现了，至于更多的，其实是对路由做比对，在前端做权限管理。

vue-router4 添加动态路由

addroutes的使用

addRoute