快速理解 vue-router （vue路由）的使用方法（二）
当有多个链接跳转到一个页面的时候，我们需要区分是哪个链接跳过来的
来显示不同的内容
<!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">
<title>Document</title>
</head>
<body>
<div id="div1">
<div>
<router-link to="/home">首页</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/post">贴子管理</router-link>
</div>
<div>
<!-- 如果是不同页面跳转过来的页面 只需要加一个name 就可以区别出来 -->
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.6.0/vue-router.js"></script>
<script>
window.onload = function(){
let routesArr = [
{
path: '/home',
component: {
template:`<div>
<h1>这是首页</h1>
</div>`
}
},
{
path: '/user',
components: {
sidebar: {
template: `
<div>
<ul>
<li> 这是 sidebar 传过来的数据1 </li>
<li> 这是 sidebar 传过来的数据2 </li>
</ul>
</div>
`
},
content: {
template: `
<div>
这是content的内容
</div>
`
}
}
},
{
path: '/post',
components: {
sidebar: {
template: `
<div>
<ul>
<li> 这是 content 传过来的数据1 </li>
<li> 这是 content 传过来的数据2 </li>
</ul>
</div>
`
},
content: {
template: `
<div>
这是content的内容
</div>
`
}
}
}
];
const vRouter = new VueRouter({
routes: routesArr
})
new Vue({
el: '#div1',
router: vRouter
})
}
</script>
</body>
</html>
