vue router动态路由

Posted 2020-09-18 GoTime

<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>