一、动态路由的理解
动态路由 就是把匹配某种模式下的路由映射到同一个组件中,其实本质就是通过url进行传参,比如说:有一个商Goods的组件,我们需要让不同的商品id都映射到这个组件中,此时就,需要用到动态路由了。
二、动态路由的配置
可以通过两种方式来传递动态参数
1.params
2.query
以上代码的演示都是在history的路由模式下
params方式 传参
配置路由的方式,使用冒号:绑定动态参数
//index.js中配置路由信息
const routes=[{
path:’/godds/:id’,
components:Goods
}]
路由跳转是,分为:
1.使用router-link方式实现路由跳转
此种方式下,一可以使用字符串,在路径后面直接跟上你对应的值,如:
App.vue
点击查看代码
<template>
<div id="app">
<router-link :to='/goods/'+id">商品</router-link>
<router-view/>
</div>
</template>
<script>
export default{
name:'App',
data(){
return {
id:'001'
}
}
}
</script>
二、可以使用对象的方式,如:
![image](https://www.icode9.com/i/l/?n=22&i=blog/2821749/202207/2821749-20220709075730169-244798602.png)
注意:
1.params 方法中,to属性使用对象的方式,必须由name属性引入路由,不能用path.
2.params方法传参时,属性名必须跟配置路由时的动态参数名一致,否则报错
使用$router的方式进行路由 的跳转
方法一1,
this.$router.push(‘/goods/’+this.goodsId)
方法2,
this.$router.push({
name:’goods’,
params:{
id:this.goodsId
}
})
})
params方式的传参,对应的传参后的url地址如下所示
localhost:8080/goods/001
获取参数的方式
$router.params.如本例中想要获取id的值,对应代码为
$router.params.id
query方式的传参
配置路由时,普通配置即可,即原来怎么配置路由,现在就怎么配置路由,
const routes=[{
path:’/goods’,
name:’goods’
component:Goods
}]
路由挑转时,分为
1.使用router-link方式实现路由跳转
query传参的方式只可以通过对象,不可以使用字符传
2.使用$router的方式进行路由的跳转
this.$router.push({
path:’/goods’,
query:{
id:this.goodsId
}
})
this.$router.push({
path:'goods',
query:{
id:this.goodsId
}
})
query方式的传参,赌赢传参后的url地址显示为
localhost:8080/goods?id=001
注意:query方式的传参,query对象里面的属性名可以随便起名,不像params方式传参时受限
同时,此种方式下路由的引入既可以使用path属性,也可以使用name属性
获取参数的方式
$router.query.如本例中想要获取 id值
$route.query.id
总之,千万要注意:
(1)、params方式路由的引入只能用name,query方式路由的引入可以用name和path。
(2)、路由跳转使用 “router”;获取参数使用“route”
原创文章,作者:jamestackk,如若转载,请注明出处:https://blog.ytso.com/272707.html