如何定義動(dòng)態(tài)路由? 如何獲取傳過來的動(dòng)態(tài)參數(shù)?
一.param方式
配置路由格式: /router/:id
傳遞的方式:在path后面跟上對(duì)應(yīng)的值
傳遞后形成的路徑:/router/123
1.定義路由
/在APp.vue中
<router-link :to=/user/'+userId”replace>用戶</router-link>
//在index.js中
{
path:'/user/:userid'
component: User,
}2.路由跳轉(zhuǎn)
// 方法1:
<router-link :to="[ name: users', params: [ uname: wade ]]">按銀</router-link
// 方法2:
this.$router.push(fname: 'users',params:funame:wade11)
// 方法3:
this.$router.push('/user/' + wade)3.參數(shù)獲取
通過$route.params.userid獲取傳遞的值
二.query方式
也就是普通配置配置路由格式:/router傳遞的方式:對(duì)象中使用query的key作為傳遞方式傳遞后形成的路徑: /route?id=123
1.路由定義
//方式1: 直接在router-link 標(biāo)簽上以對(duì)象的形式
<router-link :to="{path:'/profile',query:[name:'why',age:28,height:188]}">檔案</roter-link>
方式2: 寫成按鈕以點(diǎn)擊事件形式
<button @click='profileClick'>我的</button>
profileClick(){
this.$router.push({
path:"/profile",
query: {
name:"kobi"
age:"28"
height: 198
}
});
}2.跳轉(zhuǎn)方法
// 方法1:
<router-link :to="[ name: users', query: [ uname: james ">按</router-link>
方法2:
this.$router.push([ name: 'users', query:f uname:james ]))
方法3:
<router-link :to="[ path: '/user'， query: [ uname:james ]]">按鎮(zhèn)</router-link>
方法4:this.$router.push({ path: '/user', query: uname:james ]})
// 方法5:
this .$router.push( /user?uname=' + ismes)3.獲取參數(shù)
通過$route.query獲取傳遞的值
拓展文章來源：http://www.zghlxwxcb.cn/news/detail-604805.html
$route 和$router 的區(qū)別
$route 是“路由信息對(duì)象”，包括 path，params， hash，query， fullPath, matched，name 等路由信息參數(shù)
$router 是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等文章來源地址http://www.zghlxwxcb.cn/news/detail-604805.html
到了這里，關(guān)于vue中的動(dòng)態(tài)路由怎么配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
