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 是“路由实例”对象包括了路由的跳转方法,钩子函数等

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值