第一:控制台输出
router的输出中mode属性,history属性是我们比较熟悉的
route的输出中都是我们平常可以用到的属性’
第二:注入的属性 (区别)
通过在 Vue 根实例的 router
配置传入 router 实例,下面这些属性成员会被注入到每个子组件。
(1)this.$router
router 实例。
(2)this.$route
当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它。
第三:详细介绍router的常用用法:
(1)router实现路由跳转的两种方式,声明式、编程式(两个实现的功能是一样的,只是一个是写在html模板中,一个是写在jsvascript代码中)
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这两句代码实现同一个功能
router.push({ name: 'user', params: { userId: 123 }})
(2)编程式方式二:router.psuh
在 Vue 实例内部,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push
。
想要导航到不同的 URL,则使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link :to="...">
等同于调用 router.push(...)
。
编程式:该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串
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不能一起用,使用path如果再使用params,params会被忽略,所以
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效 是错误的写法
router.push({ path: '/user', params: { userId }}) // -> /user
(2)编程式方式二:router.replace
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
(3)访问路由
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
(4)router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
。
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
第四:详细介绍route的常用用法:
(1)$route.path
- 类型:
string
- 字符串,对应当前路由的路径,总是解析为绝对路径,如
"/foo/bar"
(2)$route.params
- 类型:
Object
例: routes:[ {path: '/user/:id', component: user} ] 为你配的路由,此时this.$route.params.id就是你的参数id的值
- 一个 key/value 对象,包含了动态片段和全匹配片段,是你自己写的路由的参数,如果没有路由参数,就是一个空对象。
(3)$route.query
- 类型:
Object
- 一个 key/value 对象,表示 URL 查询参数。例如,对于路径
/foo?user=1
,则有$route.query.user == 1
,如果没有查询参数,则是个空对象。
(4)$route.hash
- 类型:
string
- 当前路由的 hash 值 (带
#
) ,如果没有 hash 值,则为空字符串。
(5)$route.fullPath
- 类型:
string
- 完成解析后的 URL,包含查询参数和 hash 的完整路径。
(6)$route.name
- 当前路由的名称 (查看命名路由)
(7)路由的监测
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}