VUE（路由传参）

路由传参

路由的跳转有两种方式

• 申明式导航

query参数

模板字符串写法

 <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>

{
path: '/home',
component: Home,
children: [
	{
		path: 'news',
		component: News,
	},
	{
		path: 'message',
		component: Message,
		children: [
			{
				path: 'detail',
				component: Detail,
			}
		]
	}
]
}

对象式的写法，可以携带更多参数

<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:m.id,
		title:m.title
	}
}">
	{{m.title}}
</router-link>

取参数

this.$route.query.id

parms参数

直接卸写在径中：

<!-- 传递test, demo参数 -->
 <router-link :to="/home/message/detail/1001/testTittle">{{m.title}}</router-link>

路由配置

{
path:'message',
component:Message,
children:[
{
name:'detail',
path:'detail/:id/:title', // 需要占位
component:Detail,
		}
	]
}

特别注意：如果我们携带的是parms参数，我们跳转的时候只能用命名路由跳转，不能用path。

<router-link :to="{
	name:'detail',
	query:{
		id:m.id,
		title:m.title
	}
}">

• 编程式导航
  路由传参的写法
  params参数：属于路径中的一部分，需要注意，在配置路由的时候需要要占位
  query参数：不属于路径中的一部分，类似于ajax的queryString /home?k=v&k=v,不需要占位

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

//第一种方式，直接写字符串
this.$router.push("/search/" + this.keyword + "?k=v&k=v");

结果：
abc为params参数，kv为query参数

// 模板字符串写法
 this.$router.push(`/search/${this.keyword}?k=${this.keyword}`);

// 对象形式，注意对象的写法需要注意给路由取名字
this.$router.push({name : "search", params : {
             keyword : this.keyword
         },
       query: {
           k : "liyong"
       }})

路由传参注意：
路由传参的时候在对象传参的时候，对象写法可以是path或者name形式。但是需要注意的是，path这种写法不能与params参数一起使用。
如何指定params可传可不传？
配饰路由的时候，占位了params参数，但是路由跳转的时候不传递，路径会出现问题。如果要配置可传可不传，需要做如下配置。

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

parms参数可传可不传，但是如果传递是空串，如何解决（路径也会出现问题）？
使用undifined去解决

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

路由组件能传递props数据

• 第一种形式

{
    path : "/search/:keyword",
    component : Search,
    meta : {show:true},
    name : "search",
    props : true // 把parms作为路由组件的属性
}

在路由组件处接收

export default {
  data() {
    return {};
  },
  components: {},
  computed: {},
  mounted: {},
  methods: {},
  props : ["keyword"]
};

• 对象写法

{
    path : "/search/:keyword",
    component : Search,
    meta : {show:true},
    name : "search",
    props : {
		a:1,
		b:2
}// 把parms作为路由组件的属性
}
// 接收
props : ["a", "b"]

• 函数写法

{
    path : "/search/:keyword",
    component : Search,
    meta : {show:true},
    name : "search",
    props : ($route) =>{
	return {keyword:$route.parms.keyword,k:$route.query.k}
}
}
props : ["keyword", "k"]

编程式路由跳转到当前路由（参数不变），多次会抛出NavigationDuplicate的警告错误？
对于申明式导航不存在这个问题，对于编程式导航才会有这个问题,(是因为引入了Promise导致的)。
解决问题

this.$router.push({name : "search", params : {
              keyword : this.keyword
          },
        query: {
            k : "liyong"
        }},() => {},() => {})

但是这种方法只能解决单个组件的报错问题。
this.$router属性：当前的这个属性，属性值VueRouter类的一个实例，当入口文件注册路由的时候给组件实例添加$router|$route属性，我们的push方法是Vuerouter原型对象上的方法。
我们需要重写push来解决这个问题(index.js文件）

let orginPush = VueRouter.prototype.push
VueRouter.prototype.push = function(location, resolve, reject) {
    if (resolve && reject) {
        orginPush.call(this,location, resolve, reject)
    } else {
        orginPush.call(this,location, ()=>{}, () => {})
    }
}