addRoute动态添加路由与重置路由

addRoute动态添加子路由

router.addRoute('main',item)//main插入路由的name,item插入的子路由

问题： addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由。导致以下警告

解决方法：
routrer文件夹index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path:'/login',
    name:'登录',
    component:() => import('@/views/login/login.vue')
  },
  {
    path: '/',
    name: 'main',
    redirect: '/home',
    component: () => import('@/views/main.vue'),
  },
]

//写成函数模式
const createRouter = () => new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


//重置路由
const router = createRouter()
export function resetRouter () {
const newRouter = createRouter()
router.matcher = newRouter.matcher // the relevant part
}

export default router

注销登录时调用

import { resetRouter } from  '@/router/index'//导入
export default {
  methods:{
  	//注销登录
    outLogin(){
      //使用重置路由
      resetRouter()
      //清空localStorage
      window.localStorage.clear()
      this.$router.replace('/login')
    },
  }
}

拓展使用addRoute的一些坑
1.动态添加路由，刷新页面，路由会丢失

     解决办法：在路由守卫beforeEach里面判断，如果浏览器刷新没有数据，从新请求数据并添加路由，（这里可以存在vuex里面）

              最后通过 return next({ ...to, replace: true }); 重定向到应该跳到的路由

2.path: ‘*’,匹配找不到页面时，404处理，因为路由添加和查找路由机制都是依次执行的，先添加了静态路由，

  在添加动态路由时，添加的路由就会在静态路由后面，会优先匹配上path: '*' 页面，next({ ...to, replace: true })

  这一步可以打印看一下，第一次的path是你原本路由，但是因为先匹配上了path: '*'，就导致走不到后面动态添加的路由，

     解决办法：添加动态路由最后，在添加一次path: '*'，需要name一致，覆盖掉静态路由的，path: '*'，

     （需要注意）静态路由也需要path: '*'，这里的path:'*'，一般用做容错处理，只要没有的页面，都匹配上并跳转到404页面

3.a账号权限多，退出时页面没有刷新，b权限少，登录以后可以通过地址栏访问a才能访问的页面

     解决办法：重置路由，使用 router.matcher = new VueRouter({

                                routes: routes, // routes 是你的静态路由

                             }).matcher;

              如果是router 4.X 可以直接使用 removeRoute API

4.添加路由时，如果子级没有添加到父级路由下，不能通过 父级路由/子级路由访问，只能按照一级路由访问

  且子级路由添加到父级路由时，需要拼接父级路由否则也不能访问

     解决办法：在判断需要添加到指定父级下时，拼接父级和子级路由，并通过addRoute 传递第一个参数为，

     父级name的参数，添加到指定父级下，就可以达到，单独访问子级生效，及父级+子级路由访问生效，

     “这里为什么能单独访问也能生效，应该是添加父级时存在子级存在，所以可以通过子级直接访问”