Vue中路由传参常见的几个问题

Vue路由传参的几个问题

1. 路由传递参数（对象写法）path是否可以结合params参数一起使用?

答:路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数使用

2. 如何指定params参数可传可不传?

• 如果路由要求传递params参数，但是你就不传递params参数，发现一件事情，URL会有问题的，详情如下：

  • Search路由项的path已经指定要传一个keyword的params参数

    path: "/search/:keyword",

  • 不传入params参数

    this.$router.push({name:"Search",query:{keyword:this.keyword}})
    

  • 地址栏信息：http://localhost:8080/#/?keyword=asd

    • 此时地址信息少了/search
    • 正常的地址栏信息: http://localhost:8080/#/search?keyword=asd

  • 解决办法：在配置路由是在占位后面加上一个问号(?)

    • path: '/search/:keyWord?'

3. params参数可以传递也可以不传递，但是如果传递是空串，如何解决?

与2一样，URL会出现问题

• 使用undefined解决：

  this.$router.push({name:"Search",params:{keyword:''||undefined},query:{keyword:this.keyword}})
  

4. 路由组件能不能传递props数据?

可以的:三种写法

• 布尔模式，相当于把params参数，作为props属性值传递给这个路由组件

  • 路由配置中添加props配置项，props: true,

  • 按照params参数传递

    this.$router.push({name:"Search",params:{keyword:''||undefined},query:{keyword:this.keyword}})
    

  • 在配置了props配置项的路由中，接收props参数，并使用即可

    props: ['keyWord']

• 对象形式: 额外给路由组件传递一些props

  • 路由配置中添加props配置项，props: {a: 1, b: 2 }

  • 只要路由跳转

  • 在配置了props配置项的路由中，接收props参数，并使用即可

    props: ['a',b]

• 函数写法(常用)

  一般是把query参数与params参数当作props传递给路由组件

  • 路由配置中添加props配置项：

    props: (route) => {
    	//是将当前箭头函数返回结果，作为props传递给search路由组件!!!
    	return {
    		keyWord: route.params.keyWord,
    		k: route.query.k
    	};
    }
    

  • 按照params参数和query参数正常传递

    this.$router.push({name:"Search",params:{keyword:''||undefined},query:{keyword:this.keyword}})
    

  • 在配置了props配置项的路由中，接收props参数，并使用即可

    props: ['keyWord', 'k']