<div id="#app">
<router-link to="/user/header">路由1</router-link> /*指向user组件*/
<router-link to="/user/footer">路由2</router-link> /*指向user组件*/
/*当我们点击路由1得时候*/
/*------当我们点击路由2得时候*/
<router-view></router-view>
/*-----点击路由1----router-view会渲染加载我们创建的user的组件*/
/*-----点击路由2----router-view会渲染加载我们创建的user的组件*/
</div>
<script>
var user = {
template:"<div>共同匹配到的路由</div>" // 创建一个组件
}
var routes = [
{path:"user/:id",compoent:user} //定义路由
// 只要 router-link 的 to 属性指定连接是 /user/开头的，那么router-view里面都是渲染 user这个组件
//比如 : to="/user/footer" to="/user/header" to="/user/content" 无论我们点击谁，它都指向user这个组件，router-view只渲染它
]
var router = {
routers //创建router实例
}
new Vue({
el:"#app",
router // 创建和挂载
})
<script>
