1、store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    login(state) {
      state.isLogin = true
    }
  }
})

2、views/Login.vue：

<template>
  <div>
    <h1>登入頁面</h1>
    <
 
button @click="handleClick">按鈕</button>
  </div>
</template>
<script>
import { asyncRoutes } from '../router'
export default {
  methods: {
    handleClick() {
      this.$store.commit('login')
      this.$router.addRoutes(asyncRoutes) // 將asyncRoutes中的路由新增到路由表中
    }
  }
}
</
 
script>

views/Register：

<template>
  <div>
    <h1>註冊頁面</h1>
  </div>
</template>

views/About.vue：

<template>
  <div>
    <h1>關於頁面</h1>
  </div>
</template>

3、router.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Login from 
 
'@/views/Login'
import Register from '@/views/Register'
import About from '@/views/About'
const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register }
]

// 帶許可權的路由
export const asyncRoutes = [{ path: '/about', component: About }]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

4、App.vue：

<template>
  <div id="app">
    <div class="router">
      <router-link tag='div' class="nav-link" to="/login">登入</router-link>
      <router-link tag='div' class="nav-link" to="/register">註冊</router-link>
      <router-link tag='div' class="nav-link" to="/about" v-if="$store.state.isLogin">About</router-link>
    </div>
    <h1>動態新增路由</h1>
    <router-view></router-view>
  </div>
</template>
<style lang="less" scoped>
#app {
  text-align: center;
  .router {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 44px;
    background-color: #424242;
  }
  .nav-link {
    width: 100px;
    height: 100%;
    text-align: center;
    line-height: 44px;
    color: #fff;
  }
}
</style>

效果：about路由是許可權路由，預設情況下vuex中isLogin為false，此時不展示。當進入到login頁面時，點選登入按鈕，觸發vuex中isLogin為true，此時about路由展示。但此時進入到about中時router-view沒有任何內容，需要在點選按鈕的同時，將asyncRoutes中的路由（about）新增到路由表中，此時再進入到about路由便可以正常展示about元件