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

更新時(shí)間：2023年04月13日 15:51:29 作者：天外飛鮮橙子哥

本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

因?yàn)橐郧笆且淮涡蕴砑勇酚墒褂玫氖莂ddRoutes，現(xiàn)在成了addRoute一個(gè)一個(gè)添加，我登陸后動(dòng)態(tài)添加路由后，明明已經(jīng)加了路由，打開卻警告不匹配而且一片空白，然后查了說是需要

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

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

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;
? ? }
? });
}

登錄后會(huì)跳轉(zhuǎn)，然后觸發(fā)全局守衛(wèi)

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

然后第一次會(huì)進(jìn)入initMenus函數(shù)初始化路由

import axios from "axios";
export const initMenus = (router, store,next,to) => {//按F5刷新的話vuex里的會(huì)被清空，長(zhǎng)度變?yōu)?
? ? 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('請(qǐng)求菜單失敗')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? }
}

const initRoute = (router,state)=> {
? ? const loadView = view => {//這種引入方式控制臺(tái)不會(huì)報(bào)警告
? ? ? ? // 路由懶加載
? ? ? ? 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)
}

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

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

到此這篇關(guān)于vue-router4版本第一次打開界面不匹配路由問題解決的文章就介紹到這了,更多相關(guān)vue-router4界面不匹配路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: