VueRouter--$router 获取函数 · Vue&&TypeSprict--基础总结

[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 ![](https://box.kancloud.cn/9945203ad7de4997dd0ea46572977fd8_631x453.png) >[danger] ##### 关于声明式和编程式 ~~~ 1.如果说Vue单页面应用中的路由跳转是通过'VueRouter'上的方法实现的，那么'<router-link :to="...">'是如何跳转？ '解答':在官方文档中有解释道'<router-link :to="..."> 声明式写法'，'router.push(...)编程式写法'，点击 <router-link :to="..."> 等同于调用 router.push(...) ~~~ >[info] ## push -- 连接跳转 ~~~ 1.this.$router.push('参数是路由地址')-- 跳转指定页 2.注意push 是在 history 栈添加一个新的记录，因此当使用后退功能的时候可以后退到上一个网址 3.注意push路径参数都不带斜杠 4.当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 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' }}) ~~~ * 根据官方这四种方法，生成代码如下: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/sapp">sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> <button @click="handelClick('1')"> 直接使用地址 </button> <button @click="handelClick('2')"> 使用对象 </button> <button @click="handelClick('4')"> 传递参数 </button> </div> </template> <script type="text/javascript"> const sapp = { template:'#sapp', methods:{ handelClick(param){ const userId = '123' if(param === "1"){ this.$router.push('home'); }else if(param === "2"){ this.$router.push({path:'home'}); }else{ this.$router.push({ path: 'home', query: { plan: 'private' }}) } }, } }; const home = { template:'<h1>home</h1>' }; const routes=[ {path:"/sapp", component:sapp}, {path:"/home", component:home,name:'home'}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### 官方给的注意事项 ~~~ 1.如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path： 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 ~~~ >[info] ## replace -- 替换 ~~~ 1.跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样替换掉当前的 history 记录。简单的说就是历史记录后退不是上一个而是前一个，因为他把上一个给替换成自己了 ~~~ >[info] ## back 和 go ，forward ~~~ 1.具体使用和上面的案例是一样的只不过将'push'方法替换成了'go' 和'and' 2.官方给的go 说明,官方案例中虽然使用的router调用但是还是推荐'this.$router.go(1)' 去调用: // 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100) 3.forward 前进，跟go用法类似 4.back -- 返回上一页没有参数直接使用