<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>Document</title>
<style>
/* 第一层按钮 */
#app .router-link-active{
color: rgb(255, 0, 0);
}
/* 第二层按钮 */
#one .router-link-active{
color: rgb(181, 247, 1);
}
/* 第三层按钮 */
#two .router-link-active{
color: rgb(2, 174, 241);
}
/* router-link-active(前者) 和 router-link-exact-active(后者) 都是系统给的, */
/* 当该路由的二级路由触发后,父路由标签上只有router-link-active,so 给前者添加样式 */
/* 如果级别层级多,可以给包裹他们的模板的根标签加上唯一id来识别 */
</style>
</head>
<body>
<div id="app">
<!-- 主路由 -->
<router-link to="/home" tag="button">home</router-link>
<router-link to="/news" tag="button">news</router-link>
<router-link to="/about" tag="button">about</router-link>
<router-view></router-view>
</div>
</body>
<script>
// 主路由开始
const home = {
template: `
<div id="one">
<h1>
首页
</h1>
<!-- 该理由下的二级路由的视图加载位置 -->
<router-link to="/home/tuijian" tag="button">remen</router-link>
<router-link to="/home/remen" tag="button">tuijian</router-link>
<router-view></router-view>
</div>
`
}
const about = {
template: `
<div>
<h1>
关于
</h1>
</div>
`
}
const news = {
template: `
<div>
<h1>
新闻
</h1>
</div>
`
}//主路由结束
//二级路由开始
const tuijian = {//该二级路由增加在home一级路由里
template: `
<div id="two">
<h1>
推荐
</h1>
<!-- 该路由下的三级路由视图加载位置 -->
<router-link to="/home/tuijian/jingpin" tag="button">jingpin</router-link>
<router-link to="/home/tuijian/changxiao" tag="button">changxiao</router-link>
<router-view></router-view>
</div>
`
}
const remen = {
template: `
<div>
<h1>
热门
</h1>
</div>
`
}//二级路由开始
//三级路由开始
const jingpin = {
template: `
<div id="three">
<h1>
精品
</h1>
</div>
`
}
const changxiao = {
template: `
<div>
<h1>
畅销
</h1>
</div>
`
}//三级路由结束
const router = new VueRouter({//实例VueRouter路由对象
routes: [
{
path: "/home",//路由路径
component: home,//组件对象
children: [//下面的子路由
{ path: "/home/tuijian",
//注意:子路由的路径如果不带上父路由的路径,会在跳转后把父路由的路径干掉视图会很突兀,代码也会难以找到联系
component: tuijian,
children: [//也是子路由(tuijian子路由下的子路由)
{
path: "/home/tuijian/jingpin",
component: jingpin
},
{
path: "/home/tuijian/changxiao",
component: changxiao
}
]
},
{ path: "/home/remen", component: remen }
]
},
{ path: "/news", component: news },
{ path: "/about", component: about },
]
})
const v = new Vue({//实例组件
el: "#app",
router
})
</script>
</html>
vue ->路由的嵌套
最新推荐文章于 2024-05-26 12:44:14 发布