Vue路由

1、動態路由

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

2、嵌套路由：

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’

3、編程式路由

跳轉路由除了<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是咱們訪問該組件時經過路由傳遞的參數二者不同,該方式要經過路由的path來訪問， 經過？發送參數 如上標紅

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

4、咱們還能夠經過命名路由訪問組件：

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

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

5、router的mode有兩種類型

1.hash 路徑須要加#

2.history 路徑不須要加#