Vue動態路由和get傳值

動態路由

1. 配置動態路由

routes:[
    {path: '/user/:id', component: User}
]

2. 在對應的頁面

<ul>
    <li v-for="(item,key) in list)">
        //<router-link  to="/user/123">{{key}}--{{item}}</router-link>
        //動態路徑參數，以冒號開頭
        <router-link  :to="'/user/'+key">{{key}}--{{item}}</router-link>
    </li>
</ul>
this.$route.params獲取動態路由的值

get傳值

1.配置路由

routes:[
    {path: '/user', component: User}
]

2.在對應的頁面

<ul>
    <li v-for="(item,key) in list)">
        //<router-link  to="/user?id=123"></router-link>
        //動態路徑參數，以冒號開頭
        <router-link  :to="'/user?id='+key">{{key}}--{{item}}</router-link>
    </li>
</ul>
this.$route.query獲取路由的值