Vue学习笔记十五：嵌套路由
程序员文章站
2024-01-15 20:00:52
...
嵌套路由
Vue版本：2.5.21
Vue-router版本：3.1.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套路由</title>
</head>
<body>
<!--
嵌套路由
补充上一节知识点：js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题
解决方法:<router-view :key="$router.fullpath"></router-view>
代码思想
1.router-view的细分
router-view第一层中，包含一个router-view
2.每一个坑挖好了，要对应单独的组件
3.路由配置
routes:[
{
path:'/nav'，
name:'nav',
component:Nav，
//路由嵌套增加此属性
children：[
//在这里配置嵌套的子路由
]
}
]
-->
<div id="app"></div>
<script src="../vue.js"></script>
<!-- 引入路由插件 -->
<script src="../vue-router.js"></script>
<script>
var Nav = {
template: `
<div>
<router-view></router-view>
<router-link :to="{name:'nav.index'}">首页</router-link>
<router-link :to="{name:'nav.pensonal'}">个人中心</router-link>
<router-link :to="{name:'nav.message'}">咨询</router-link>
<router-link :to="{name:'nav.mine'}">我的</router-link>
</div>
`,
}
var Index = {
template:
`
<div>首页</div>
`
}
var Pensonal = {
template:
`
<div>个人中心</div>
`
}
var Message = {
template:
`
<div>咨询</div>
`
}
var Mine = {
template:
`
<div>我的</div>
`
}
// 安装路由插件
Vue.use(VueRouter);
// 创建路由对象
var router = new VueRouter({
// 配置路由
routes: [
{
path: `/nav`,
name: 'nav',
component: Nav,
children: [
//配置我们的嵌套路由
{ path: '', redirect:'/nav/index'},
{ path: 'index', name: 'nav.index', component: Index },
{ path: 'pensonal', name: 'nav.pensonal', component: Pensonal },
{ path: 'message', name: 'nav.message', component: Message },
{ path: 'mine', name: 'nav.mine', component: Mine },
]
}
]
})
new Vue({
el: "#app",
router,
template: `
<div>
<router-view></router-view>
</div>
`,
data() {
return {
}
}
});
</script>
</body>
</html>
效果
下一篇： python嵌套