vue router总结 $router和$route及router与 router与route区别

vue router总结 $router和$route及router与 router与route区别

1 this.$router和this.$route的区别

vue router

this.$router

是VueRouter的实例方法，当导航到不同url，可以使用

this.$router.push

方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者

this.$router.back()

就会回退之前的url。

this.$route

相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。

2 路由跳转分为编程式和声明式

声明式

//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>
//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>

当你想在一个页面嵌套子路由，并且不跳转页面的时候，我觉得这个超好用啊，子页面就会渲染在router-view的地方

编程式

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

但是一定要注意啊，如果你提供了path,那么params和query的配置就会被忽略的

3 path:’name’和path:’/name’的区别

如果加/则会被当作跟目录，否则当前的路径会嵌套在之前的路径中

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name
//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name

ps:下面看下vue中router与 router与route区别

vue-router中经常会操作的两个对象route和 route和router两个。

1、$route对象

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。