#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')
}
}