一、動態路由

routes: [
{
　　path: ‘/goods/:goodsId/user/:name‘,
　　name: ‘GoodsList‘,
　　component: GoodsList
},
]

goodsId和name是動態的，訪問的時候我們必須這樣輸入：

http://localhost:8084/#/goods/1234/user/lvruifang

頁面中我可以這樣訪問路由參數：

{{$route.params.goodId}} {{$route.params.name}}

二、嵌套路由：

routes: [
{
　　path:‘/main‘,
　　name:"Main",
　　component:Main,
　　children:[
　　　　{
　　　　　　path:‘title‘,
　　　　　　name:‘Title‘,
　　　　　　component:Title
　　　　},
　　　　{
　　　　　　path:‘head‘,
　　　　　　name:‘Head‘,
　　　　　　component:Head
　　　　}
　　]
},
]

嵌套路由通過children屬性來命名子路由，其中子路由的path不可以寫成‘/title’，只需要寫‘title’,寫了‘/’就不是上下級關系而是平級的關系了；

嵌套路由的<router-view></router-view>需要寫在父級頁面，也就是組件Main頁面中；

router-link的寫法如下：

<router-link to="/main/title">顯示標題組件</router-link>一定在前面加上父級的path,也就是‘/main’

三、編程式路由

跳轉路由除了<router-link to="/main/title"></router-link>的方法還可以通過js跳轉路由

1.this.$router.push("/cart")

2.this.$router.push({path:‘/cart‘})

3.this.$router.push({path:‘/cart?postId=123‘})其中參數postId我們可以通過{{$route.query.postId}}來拿到這個參數

這裏我們需要註意$route.params.goodId獲取的是路由切換時路由的參數

而$route.query.postId是我們訪問該組件時通過路由傳遞的參數兩者不一樣

4.this.$router.go(-2) 頁面路由向後退兩步

四、我們還可以通過命名路由訪問組件：

<router-link :to="{name:‘Cart‘,params:{postId:345}}">通過路由名稱跳轉到購物車頁面</router-link>

其中name值為路由裏對應的name值，params為動態路由需要傳遞的參數

Vue路由