vue router传值 this.$route this.$router

#Router 和 Router 区别

在vue的开发中路由router是必不可少的一部分，下面就简单的说下其中router和route的区别

可以看到this.$route和router分别打印出来的样子，router代表是整个vue的路由信息在其中的history.current就可以找到当前的路由信息即route

#传值

在vue中的路由一般用到两种，即router-link标签中使用to传值，也可用this.$router.push()实现跳转并传参

//	声明式路由
<router-link :to="{path: '/', query: { id: '3'}}">Home</router-link> |
<router-link :to="{name: 'About', params:{ id: '5'}}">About</router-link>

//	编程式路由
this.$router.push({ path: '/', query: { id: '3'}})
this.$router.push({ name: 'About', params:{ id: '5'}})
//	只有一个参数默认为path,下面两者一样的
this.$router.push('/')
this.$router.push({ path : '/'} )

区别
about使用的name+params
home使用的path+qurry
这是打印出来的信息其中参数放置的位置不同，所以获取传递的参数的地址也不同

其中fullpath会改变url，在路由的hash模式下：

小麻烦
如果自己使用编程式路由做类似于导航的功能时，在点击跳转后再次点击同一个跳转按钮，是会报错的，这时可以结合上文的this.$router.history.current.path做判定来解决

// 这是点击跳转事件
toTop () {
	if (this.$router.history.current.path !== '/about') {
		this.$router.push('/about')
	}
}