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版本第一次打开界面不匹配路由问题解决的文章就介绍到这了,更多相关vue-router4界面不匹配路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！