vue|[vue]路由传参的三种方式 javascript|前端|vue.js

1. 字符串路由传参 route下的index.js

{ path: '/search/:keyword', name: 'Search', component: () => import('../views/Search/index.vue'), meta:{ show:true }

components下的header.vue

this.$router.push( "/search/" + this.keyword + "?k=" + this.keyword.toUpperCase() );

【vue|[vue]路由传参的三种方式】

文章图片

2. 模板字符串路由传参 route下的index.js同上 components下的header.vue

methods: { goSearch() { this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`) }, },

文章图片

3. 对象路由传参 route下的index.js同上 components下的header.vue

methods: { goSearch() { this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}}) }, },

文章图片

路由传参的相关面试题面试题1.路由传递参数的对象写法可以结合params参数一起使用吗答:路由跳转传参时,对象的写法可以是name和path的形式,但是path的这种写法不能和params参数一起使用,官方文档原话:路径参数确实无法匹配path里面的占位符

methods: { goSearch() {this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}}) }, },

文章图片

面试题2.如何指定params参数可传可不传答：会出现路径问题，如变成这样：http://localhost:8080/?k=QWE, 但是正常路径应该由首页跳转到search页，如这样：http://localhost:8080/search/qwe?k=QWE解决办法：在路径后面加一个问号就可以解决这个问题如: path: ‘/search/:keyword?’

{ path: '/search/:keyword?', name: 'search', component: () => import('../views/Search/index.vue'), meta:{ show:true } }

methods: { goSearch() { this.$router.push({name:'search',query:{k:this.keyword.toUpperCase()}}) }, },

面试题3.对象路由传参方法,params可传可不传加问号就行,那如果params传的是空串怎么办答:params写空串会出现这种有问题的路径:http://localhost:8080/?k=QWE 解决:用undefiend指定params可传可不传空串

methods: { goSearch() { this.$router.push({ name: "search", params: { keyword: "" || undefined }, query: { k: this.keyword.toUpperCase() }, }); }, },

文章图片

面试题4.路由组件可以传递props数据吗答：可以,有三种写法
第一种:布尔值的写法但是它只能传params参数

搜索参数:{{$route.params.keyword}}---{{keyword}}

export default { // 接收路由组件传过来的keyword这个参数 props:['keyword'] };

{ path: '/search/:keyword?', name: 'search', component: () => import('../views/Search/index.vue'), meta:{ show:true }, props:true }

第二种路由传参对象写法:额外给路由组件传递一些props

{ path: '/search/:keyword?', name: 'search', component: () => import('../views/Search/index.vue'), meta:{ show:true }, props:{a:1,b:2} }

export default { // 接收路由组件传过来的keyword这个参数 props:['keyword','a','b'] }

搜索参数:{{$route.params.keyword}}---{{keyword}}---{{a}}---{{b}}

第三种路由传参函数写法:最常用

{ path: '/search/:keyword?', name: 'search', component: () => import('../views/Search/index.vue'), meta:{ show:true }, props:($route)=>{ return {keyword:$route.params.keyword,k:$route.query.k} } }