不同页面间切换没有问题,但只要刷新页面或者通过路径访问现在的页面,就会白页,控制台报错No match found for location with path
router
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: '首页',
component: () => import('../layout'),
redirect:'/index',
children: [
{
path: '/index',
name: '首页',
component: () => import('../views/index/index')
},
{
path: '/userCenter',
name: '个人中心',
component: () => import('../views/userCenter/index')
}
]
},
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
路由守卫
import router from '@/router'
import store from '@/store'
router.beforeEach((to, from, next) => {
const whiteList = ['/login']
let token = store.getters.GET_TOKEN
if (token) {
let hasRouter = store.state.hasRoutes
let menuList = store.getters.GET_MENU
if (!hasRouter) {
bindRoute(menuList)
store.commit('SET_ROUTES_STATE', true)
}
next()
} else {
if (whiteList.includes(to.path)) {
next()
} else {
next('/login')
}
}
})
//动态绑定路由
const bindRoute = (menuList) => {
let routes = router.options.routes
menuList.forEach(menu => {
if (menu.children) {
menu.children.forEach(m => {
let route = menuToRoutes(m, menu.name)
if (route) {
routes[0].children.push(route)
}
})
}
})
//加到路由里
routes.forEach(route => {
router.addRoute(route)
})
}
//菜单对象转路由对象
const menuToRoutes = (menu, parentName) => {
if (!menu.component) {
return null
} else {
let route = {
name: menu.name,
path: menu.path,
meta: {
parentName: parentName
}
}
route.component = () => import('@/views/' + menu.component + '.vue')
return route
}
}
【相关推荐】
path元素是用来定义形状的通用元素,所有的基本形状都可以用path元素来创建
这里用了path的
d
属性来创建圆形进度条d属性:
该属性定义了一个路径,其中包含了一系列路径描述.
这些路径由下面这些指令组成: