<!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);
}
</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 = {
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({
routes: [
{
path: "/home",
component: home,
children: [
{ path: "/home/tuijian",
component: tuijian,
children: [
{
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>