怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
--可以通过query ,param两种方式区别:query通过url传参,刷新页面还在params刷新页面不在了params的类型:配置路由格式:/router/:id传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123<!-- 动态路由-params -->//在APP.vue中<router-link :to="'/user/'+userId" r
·
--可以通过query ,param两种方式
区别: query通过url传参,刷新页面还在 params刷新页面不在了
params的类型:
- 配置路由格式:/router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路径:/router/123
<!-- 动态路由-params -->
//在APP.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>
//在index.js
{
path: '/user/:userid',
component: User,
},
跳转方法:
// 方法1:
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2:
this.$router.push({name:'users',params:{uname:wade}})
// 方法3:
this.$router.push('/user/' + wade)
可以通过$route.params.userid 获取你说传递的值
query的类类型
- 配置路由格式:/router,也就是普通配置
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/route?id=123
<!--动态路由-query -->
//01-直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
/*
02-或者写成按钮以点击事件形式
<button @click='profileClick'>我的</button>
*/
//点击事件
profileClick(){
this.$router.push({
path: "/profile",
query: {
name: "kobi",
age: "28",
height: 198
}
});
}
跳转方法:
// 方法1:
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
// 方法2:
this.$router.push({ name: 'users', query:{ 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=' + jsmes)
可以通过$route.query 获取你说传递的值
更多推荐
已为社区贡献1条内容
所有评论(0)