√vue-router

√vue-router添加和删除权限

• 路由分为静态路由和动态路由
• 动态路由可以使用router.addRoute依次添加，addRoutes将在最新版本4移除
• 如果需要清空新增路由，需要借助new VueRouter重新生成路由表,vue-router4似乎增加removeRoute的方法
• 动态路由是不会添加到$router.options中，除非手动添加进去

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <router-link to="/add1">Add1</router-link>|

      <router-link to="/add2">Add2</router-link>
      <br>
      <button @click='add1'>add1</button>
      <button @click='add2'>add2</button>
      <button @click="remove1">remove1</button>
    </div>
    <router-view/>
  </div>
</template>
<script>
import VueRouter from 'vue-router'

export default {
  methods:{
    add1(){
      // this.$router.options.routes.pop()
      // console.log(this.$router)
      // console.log(this.$router.options.routes)
      this.$router.addRoute({
        path: '/add1',
        name: 'Add1',
        component: () => import(/* webpackChunkName: "add1" */ './views/Add1.vue'),
        children:[{
           path: '/add1',
           name: 'Test',
           component: () => import(/* webpackChunkName: "test" */ './views/Test'),
        }]
       })
    },
    add2(){
      console.log(VueRouter)
    },
    remove(){
        // 获取原始路由数据
          var options = this.$router.options

          // 用原始数据重新 new 一个路由
          var _VueRouter = new VueRouter(options)

          // 用新路由的 matcher 替换旧路由的 matcher
          this.$router.matcher = _VueRouter.matcher
          location.reload()
    },
  }
}
</script>

• 手动添加动态路由到options中

参考1 (opens new window)

路由的相对路径和绝对路径

相对路径（不带‘/’）会拼接父级路由，绝对路径（带‘/’）是配置的完整路由

const router = new VueRouter({
  routes: [
    {
      path: '/my',  //父级路径
      component: Info,
      children: [
        { path: 'home', component: Home },  //相对路径
        { path: '/about', component: About }  //绝对路径
      ]
    }
  ]
})

historyApiFallback

historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。

• boolean值：默认是false 如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容；
• object类型的值，可以配置rewrites属性：
  • 可以配置from来匹配路径，决定要跳转到哪一个页面；