路由传参相应面试题

上一篇文章中写了路由跳转和路由传参的相应内容

Vue2和Vue3的路由跳转及路由传参_Eric加油学！的博客-CSDN博客

针对于params和query参数的传递，有若干的面试题值得记录

上一篇也写到了，如果使用对象形式传递params参数，需要占位，并使用name形式。

面试题1 如何指定params参数可传可不传

所以，第一步试验params参数占位了，但是不传递params参数会怎么样

{
    path:'/search/:keyword',
    component: SearchIndex,
    meta:{show:true},
    name:"search"
}

$router.push({
                name:"search",
                query:{k:keyword.value.toUpperCase()}
            })

这里我配置路由时，params参数占位了，但是我实际传递时，并没有params参数，只有query参数。

这时候它的路径就会有问题。 比如，此时我是在localhost/home 。 讲道理点一下搜索按钮，至少路径应该是localhost/search 吧。如果传参了，后面应该会跟参数。

比如 params参数为abc，query参数为ABC 。 跳转的路径应该是localhost/search/abc?k=ABC

但如果占位而不传递params的话，它的路径是 localhost/?k=ABC （它连/search都没了！！！）

所以如何去指定params可传可不传呢？ 配置路由后，占位的后面加上一个问号？ （就表示params可传递或不传递）

{
    path:'/search/:keyword?',
    component: SearchIndex,
    meta:{show:true},
    name:"search"
}

面试题2:params参数可传可不传，但如果传递是空串，如何解决 

按照上面的步骤，指定了params可传可不传，但是我实际传递时，传了params参数只不过是个空串，会怎样？

{
    path:'/search/:keyword?',
    component: SearchIndex,
    meta:{show:true},
    name:"search"
}

$router.push({
                name:"search",
                params:{keyword: ' '},
                query:{k:keyword.value.toUpperCase()}
            })

同样的，它的路径也会出问题，也是会少了 /search

解决： 使用undefined解决params参数可以传递、不传递（空的字符串）

$router.push({
                name:"search",
                params:{keyword: '' || undefined},
                query:{k:keyword.value.toUpperCase()}
            })

面试题3:路由组件能不能传递props数据

可以。 有三种写法

router/index.js中

const routes = [
    {
        path:'/search/:keyword',
        component: SearchIndex,
        meta:{show:true},
        name:"search",
        // 路由组件能不能传递props数据？   可以！
        // 第一种：布尔值写法 - 只能params参数
        // props:true

        // 第二种：对象写法,额外给路由组件传递一些props
        // props:{a:1,b:2}

        // 第三种：函数写法 （最常见） params参数、query参数，通过props传递给路由组件
        props:($route)=>{
            return {keyword:$route.params.keyword,k:$route.query.k};
        }
    },

SearchIndex.vue中

<template>
  <div>
    我是搜索
    <h1>params参数---{{$route.params.keyword}}---{{keyword}}</h1>
    <h1>query参数---{{$route.query.k}}---{{k}}</h1>
  </div>
</template>

<script>
export default {
  props:['keyword','k']
}
</script>

<style>

</style>

 不过好像实际中也很少用到props数据，（但似乎一定程度上可以解耦吧）