Vue 的 addroutes 方法是用來給已經實例化的 Vue Router 對象添加新的路由配置的。使用這個方法可以動態的添加路由，從而實現動態路由的需求。

然而，在某些情況下，在使用 Vuex 存儲模塊的時候，我們可能會遇到一種問題：routes 在 addRoutes 之后并沒有被更新。

const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
}
]
})
const store = new Vuex.Store({
state: {
loggedIn: false
},
mutations: {
setLoggedIn(state, loggedIn) {
state.loggedIn = loggedIn
}
},
actions: {
login(context) {
// 模擬異步請求后的結果
setTimeout(() =>{
context.commit('setLoggedIn', true)
// 動態添加路由
router.addRoutes([
{
path: '/profile',
component: Profile,
meta: { requiresAuth: true }
}
])
}, 1000)
}
}
})
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requiresAuth)) {
// 判斷用戶是否登錄
if (!store.state.loggedIn) {
next('/login')
} else {
next()
}
} else {
next()
}
})
const app = new Vue({
router,
store,
el: '#app',
data: {
message: 'Hello, Vue!'
}
})

上面這段代碼中，我們通過模擬異步登錄請求來動態的添加一個需要登錄權限的路由。但是，在這里我們發現一個問題：路由并沒有被更新。

這是為什么呢？原因在于 Vue Router 在更新路由時采取了一種比較簡單的優化方式：它只會更新已經注冊過的路由。

因此，在 addRoutes 之后，我們需要手動的更新 router.matcher，在這里我們可以通過調用 router.addRoutes([]) 的路由器對象的 $mount() 方法來達到這個目的。

router.addRoutes([
{
path: '/profile',
component: Profile,
meta: { requiresAuth: true }
}
])
// 手動更新 matcher
router.matcher = new VueRouter({
routes: router.options.routes
}).matcher
// 或者直接使用 $mount() 方法
router.addRoutes([]).$mount()

上面這段代碼中，我們重置了 router.matcher，并更新了路由。這個時候，我們就可以成功地添加新的路由了。