Router.push()
Router.replace()
router.go(n)

声明与编程导航

应用场景,可单独对跳转等,或者遍历循环,按钮事件 , 以下案列使用的是编程式,同样也可以在声明式中使用
有2种方法,来调用

1声明式:

是使用标签
声明式:是使用标签携带数据 

  1.        <button @click="Btnrouter">点击</button>
  2.     <router-link :to="{ path: 'Login' }">router</router-link>
  3.     <router-link :to="{ path: './Login' }">router</router-link>
  4.     <router-link :to="{ name: 'user',params:{userId:'123'}}">router</router-link><!-- /user/123  -->
  5.     <router-link :to="{path:`/user/${userId}`}">router</router-link><!-- /user/123  -->
  6.     <router-link :to="{ path: './Login',query:{can:'123456'}}">router</router-link><!--http://localhost:8080/Login?can=123456-->

2 编程式:

是在编程中使用 this.$router.push(‘….’)

  1.    methods:{
  2.         Btnrouter:function(){
  3.             console.log("触发了");
  4.             //字符串
  5.             this.$router.push("Login")
  6.             //对象
  7.             this.$router.push({path:"Login"})
  8.             //相对路径
  9.             this.$router.push( {path:"./Login"})
  10.             //命名的路由
  11.             this.$router.push( {name:'user',params:{userId:'123'}})
  12.             //路由 跳转,并携带数据到该页面, 变成 /Login?plan=plivate 
  13.             this.$router.push({path:"Login",query:{plan:"private"}})
  14.         }
  15.     }

注意: 第1条的params 不会生效,因为它使用的是 path 正确使用的是第2条
错误 // -> /user
正确 // -> /user/123

router 有2个属性

  1. 在 2.2.0+  Router.push  或 router.replace  中都会提供 onComplete 和 onAbort 回调作为第二个和第三个参数.<br />    这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise。

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。

router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式:
编程式: this.$router.replace({})
更多使用方法,可参考上面的列子

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

例子

  1. // 在浏览器记录中前进一步，等同于 history.forward()
  2. router.go(1);
  3. // 后退一步记录，等同于 history.back()
  4. router.go(-1);
  5. // 前进 3 步记录
  6. router.go(3);
  7. // 如果 history 记录不够用，那就默默地失败呗
  8. router.go(-100);
  9. router.go(100);

操作 History

你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。

导航守卫

在什么时候使用呢,比如我在创建之前进行数据请求等,或者在 进入到其他组件路由之前,做一些数据处理,检验等

可以在3个场景中使用

1 在路由文件夹使用 store/index.js 全局中使用
2 在路由文件夹使用 store/index.js 单独在路由中使用
3 在组件页面中使用 script标签里, 跟生命周期等 同级

1 全局中使用

  1. //全局 路由守卫 时间节点
  2. //每次跳转之前   每次跳转到另一个页面之前
  3. router.beforeEach((to, from, next) => {
  4.   // console.log("每次跳转之前触发", to);
  5.   if (to.path == "/Login") {//这里可以判断你有没有这个权限
  6.     next("/register")
  7.   }else{
  8.     next()
  9.   }
  11. })
  13. // 每次跳转之后触发
  14. router.afterEach((to, from) => {
  15.   // console.log("跳转之后触发:", to);
  16.   console.log("跳转之后触发:", to.name);
  17. })

2 单独在路由中使用

  1. {
  2.     path: '/Me',//当访问这个页面的时候
  3.     name: 'Me',//个人中心
  5.     beforeEnter: (to, from, next) => {//路由守卫 单独在路由进入之前 配置
  6.             console.log(store.state);
  7.         if (store.state.userx.isLogin) {
  8.             next()//进行下一步的意思
  9.         } else {
  10.             next("/Login");//没有登陆的话,就跳转到登陆页面
  11.         }
  12.     },
  13.     component: () => import(/* webpackChunkName: "about" */ '../views/Me.vue')
  14. },

3 在组件中使用

  1. <script>
  2. export default {
  3. name: "演示路由router调用",
  4. data() {
  5.     return {
  6.         userId: "",
  7.     };
  8. },
  9. beforeRouteEnter(to, form, next) {
  10.     console.log("组件路由进入之前");
  11.     next();
  12. },
  13. beforeRouteUpdate(to, from, next) {
  14.     console.log("组件路由更新之前");
  15.     next();
  16. },
  17. beforeRouteLeave(to, from, next) {
  18.     console.log("组件路由离开之前");
  19.     next();
  20. },

## 动态路由

获取动态路由的参数, 根据浏览器中的地址,显示响应的信息

{{$route.params.id}}


image.png
image.png