文章目录
- 7.路由传参
- 7.1路由跳转有几种方式?
- 7.2路由传参,参数有几种写法?
- 本人其他相关文章链接
7.路由传参
7.1路由跳转有几种方式?
比如:A -> B
- 声明式导航:router-link(务必要有to属性),可以实现路由的跳转。
- 编程式导航:利用的是组件实例的$router.push|replace方法,可以实现路由的跳转。(可以书写一些自己的业务)
7.2路由传参,参数有几种写法?
- params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位。
- query参数:不属于路径当中的一部分,类似于ajax中的queryString /home?k=v,不需要占位。
注意点1
:路由当中的占位符用的是:,比如path: ‘/search/:keyword’,其中:keyword就代表参数的占位符
//配置路由
export default new VueRouter({
routes:[
{
path: '/search/:keyword',
component: Search,
meta:{"isShow": true}
}
]
})
注意点2
:在路由传参中如果使用params方式且路由传参使用对象方式的话,再进行路由配置时必须设置相应的name属性才行,否则会导致传参失效。
注意点3
:标签<router-link>中传参使用对象方式,请使用:to=“{}”,而不是:to={}
注意点4
:路由传参的3种写法
methods:{
//搜索按钮的事件处理函数,用于跳转到search路由组件当中
goSearch() {
//路由传递参数
//第1种:字符串形式
this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
//第2种:模板字符串
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
//第3种:对象,其中params和query对象属性中的key属性名称加不加双引号都是可以识别的
this.$router.push({name: 'search', params:{keyword:this.keyword}, query:{k:this.keyword.toUpperCase()}})
}
}