vue router嵌套路由
一、新建2个页面
One.vue
<template>
<div>About One</div>
</template>
Two.vue
<template>
<div>About Two</div>
</template>
二、配置index.jx路由器
//1.定义路由组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
import NotFound from '../views/NotFound.vue'
import One from '../views/One.vue'
import Two from '../views/Two.vue'
//2.定义一些路由
const routes = [
{ path: '/', component: Home },
{
path: '/about',
component: About,
children:[
{path:'one',component:One},
{path:'two',component:Two}
]
},
{ path: '/user/:id?', component: User },
{ path: '/:pathMatch(.*)', component: NotFound }
]
//3.创建路由实例并传递 routes 配置
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
//4.内部提供了history模式的实现。（hash模式）
history: createWebHashHistory(),
routes,
})
//导出router
export default router;
其中 children 设置路由器
三、设置About.vue
<template>
<p>About</p>
<router-link to="/about/one">one</router-link>
<span>---------------------------------</span>
<router-link to="/about/two">two</router-link>
<router-view></router-view>
</template>
效果
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107037.html
