VueRouter–$router 获取函数
最后更新于：2022-04-02 08:08:11
[TOC]
>[success] # $router -- 路由函数使用
~~~
1.先简化来看'Vue Router'的使用
1.1.需要先声明'Vue Router'实例在声明时候传入对应Router 构建选项作为参数
关于构建项具体参考'https://router.vuejs.org/zh/api/#routes'
1.2.并且把当前'Router' 实例挂载到vue上
简单的代码说明上述步骤：
const router = new VueRouter({
routes:[{}...]
})
const vm = new Vue({
// 注册 router 对象
// 注入 $route $router route包含当前route对象的数据
// router包含router方法以及路由一些信息
router,
render: h => h(App)
}).$mount('#app')
2.配置后，在去打印'Vue'实例如图可以发现此时，实例上挂载了一个$router 属性，并且
它是一个'VueRouter'的实例对象
3.关于'VueRouter'实例的路由对象内部会有关于路由相关的方法，其中'currentRoute'为当前路由对应
的路由信息对象也就是下一章节要说的'$route'
4.'$router'中包含路由函数的方法例如:
'go' ' back' ' forward' ' push' ' replace'等控制路由跳转一类的方法，当我们想
使用这些方法的时候首先想到'$router'
5.总结: 当想控制路由时候可以通过'VueRouter' 实例提供的方法进行操作,并且这个实例已经被挂在到了Vue
实例上，我们可以通过挂在实例上的'$router'来调用是等同的
~~~
* 这个图是一个组件对象中所包含的属性可以看到$router
>[danger] ##### 关于声明式和编程式
~~~
1.如果说Vue单页面应用中的路由跳转是通过'VueRouter'上的方法实现的，那么''是如何跳转？
'解答':在官方文档中有解释道' 声明式写法'，'router.push(...)编程式写法'，
点击 等同于调用 router.push(...)
~~~
>[info] ## push -- 连接跳转
~~~
1.this.$router.push('参数是路由地址')-- 跳转指定页
2.注意push 是在 history 栈添加一个新的记录，因此当使用后退功能的时候
可以后退到上一个网址
3.注意push路径参数都不带斜杠
4.当你点击 时，这个方法会在内部调用，所以说，点击
等同于调用 router.push(...)。
~~~
>[danger] ##### 案例 -- 官方文档案例
~~~
// 字符串
，/home
router.push('home')
// 对象
,/home
router.push({ path: 'home' })
// 命名的路由（动态路由使用这种方式)-> /user/123
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
~~~
* 根据官方这四种方法，生成代码如下:
~~~
Examples
sapp
';