vue-router4版本第一次打開界面不匹配路由問題怎么解決

這篇文章主要介紹“vue-router4版本第一次打開界面不匹配路由問題怎么解決”，在日常操作中，相信很多人在vue-router4版本第一次打開界面不匹配路由問題怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue-router4版本第一次打開界面不匹配路由問題怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

問題：[Vue Router warn]: No match found for location with path “/home”

因為以前是一次性添加路由使用的是addRoutes，現在成了addRoute一個一個添加，我登陸后動態添加路由后，明明已經加了路由，打開卻警告不匹配而且一片空白，然后查了說是需要

next({...to,replace:true})

這個…to，表示會再去一次這個路徑，才能激活那個路徑的匹配
以下是我的登錄和加載菜單的邏輯和寫法

login() {
  this.$refs.ruleForm.validate(valid => {
    if (valid) {
      this.axios.postForm('/login',this.loginForm).then(response => {
        let data = response.data;
        this.$store.commit('login', data)
        let redirect = this.$route.query.redirect
        this.$router.push({path: (redirect === undefined) ? '/home' : redirect});
      })

    } else {
      return false;
    }
  });
}

登錄后會跳轉，然后觸發全局守衛

router.beforeEach((to, from, next) => {//配置路由守衛
    if(to.path==='/'){
        next()
    }else if(store.state.user.id){
        initMenus(router,store,next,to)
    }else{
        next({ path: '/',query: {redirect: to.path}});
    }
});

然后第一次會進入initMenus函數初始化路由

import axios from "axios";
export const initMenus = (router, store,next,to) => {//按F5刷新的話vuex里的會被清空，長度變為0
    if (store.state.menu !== null) {
        next()
    }else {
        axios.get("/menu").then(response => {
            if (response) {
                let responseData = response.data
                if (responseData.flag) {
                    store.state.menu = responseData.data
                    initRoute(router,store.state)
                    next({...to,replace:true})//解決router4版本的第一次路由不匹配問題
                } else {
                    this.$ElMessage.error('請求菜單失敗')
                }
            }
        })
    }
}

const initRoute = (router,state)=> {
    const loadView = view => {//這種引入方式控制臺不會報警告
        // 路由懶加載
        return () => import(`@/views/${view}`)
    };
    const menus = state.menu
    const firstLevelMenu = {
        children: [],
        component: loadView('home/HomeView.vue')
    }
    menus.forEach(menu=>{
        menu.component = loadView(menu.component)
        if(menu.children === null || menu.children.length === 0){
            firstLevelMenu.children.push(menu)
        }else{
            menu.children.forEach(children=>{
                children.component = loadView(children.component)
            })
            router.addRoute(menu)
        }
    })
    router.addRoute(firstLevelMenu)
}

一定要在添加完所有路由后寫這個next({…to,replace:true})，而且next不能重復調用

最后可以解決界面空白問題，但是警告不會消失

到此，關于“vue-router4版本第一次打開界面不匹配路由問題怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！