vue中的动态路由怎么配置-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中的动态路由怎么配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如何定义动态路由? 如何获取传过来的动态参数?
一.param方式
配置路由格式: /router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123

1.定义路由

/在APp.vue中
<router-link :to=/user/'+userId”replace>用户</router-link>
//在index.js中
{
path:'/user/:userid'
component: User,
}

2.路由跳转

// 方法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.参数获取

通过$route.params.userid获取传递的值

二.query方式
也就是普通配置配置路由格式:/router传递的方式:对象中使用query的key作为传递方式传递后形成的路径: /route?id=123
1.路由定义

//方式1: 直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:[name:'why',age:28,height:188]}">档案</roter-link>
方式2: 写成按钮以点击事件形式
<button @click='profileClick'>我的</button>
profileClick(){
this.$router.push({
path:"/profile",
query: {
name:"kobi"
age:"28"
height: 198
}
});
}

2.跳转方法

// 方法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 ]]">按镇</router-link>
方法4:this.$router.push({ path: '/user', query: uname:james ]})
// 方法5:
this .$router.push( /user?uname=' + ismes)

3.获取参数

通过$route.query获取传递的值

拓展

$route 和$router 的区别
$route 是“路由信息对象”，包括 path，params， hash，query， fullPath, matched，name 等路由信息参数
$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等文章来源地址https://www.toymoban.com/news/detail-604805.html

到了这里，关于vue中的动态路由怎么配置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！