vue路由传值相关问题

vue路由传值相关问题

• 路由跳转的几种方法
  1.普通字符串跳转

this.$router.push(`/search/${this.key}?k=${this.k}`)
router index.js:
	{
	path:'/search/:key?',
	component:Search
}

2.name跳转

this.$router.push({name:'search',params:{key:this.key},query:{k:this.k}})
router index.js:
	{
	path:'/search/:key?',
	component:Search,
	name:'search'
}

• 路由传递参数(对象写法) path能否结合params参数一起使用？

  路由跳转传参时 对象写法可以是name path形式,需要注意的是 path写法不能与params 参数一起使用

• 如何指定params参数可传可不传?
  如果路由要求传递params参数 不传递params参数的话 URL会出现问题
  如何指定params参数可传可不传 在配置路由的时候 占位后面加一个问号

• params 如果传递空值 如何解决？
  使用undefined解决 params传空值的问题

• 路由组件能不能传递props数据
  可以传 三种写法:

• 布尔值写法 props:true (只能传递params参数)

• 对象写法 额外给路由传递props props:{a:1}

• 函数写法 可以params参数 query参数 通过props传递给路由组件

   props:($route)=>{
      return {key:$route.params.key,val:$route.query.val}
   }