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

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()
       );

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参数

 <h1>搜索参数:{{$route.params.keyword}}---{{keyword}}</h1>

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']
}

<h1>搜索参数:{{$route.params.keyword}}---{{keyword}}---{{a}}---{{b}}</h1>

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

 {
    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}
    }
  }

 <div>
    <h1>搜索参数:{{keyword}}</h1>
    <h1>搜索参数:{{k}}</h1>
  </div>

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