问题:router配置代码如下,/和/main及/main的子页面是可以显示的,但是/about页面不可以。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Main from '../views/Main.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: '/',
component: Main
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
},
{
path: '/main',
name: 'main',
component: Main,
children: [
{path: 'home', name: 'home', component: () => import('../views/HomeView.vue')},
{path: 'about', name: 'about', component: () => import('../views/AboutView.vue')},
]
},
]
})
export default router
原因:route配置有两个name为"about",name不能重复。
解决方法:把name改为任意字符串,不一样即可。(区分大小写)
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Main from '../views/Main.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: '/',
component: Main
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
},
{
path: '/main',
name: 'main',
component: Main,
children: [
{path: 'home', name: 'home', component: () => import('../views/HomeView.vue')},
{path: 'about', name: 'about', component: () => import('../views/AboutView.vue')},
]
},
]
})
export default router