vue router動態路由

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