vue路由

1、

2、this.$router.push()跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个

页面

3、this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上

个页面

4、this.$touter.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数

Vue-router 路由守卫

全局导航钩子（跳转前进行判断拦截）

            router.beforeEach(to,from,next)

            router.beforeResolve(to,from,next)

            router.beforeEach(to,from,next)

组件内钩子

            beforeRouteEnter

            beforeRouteUpdate

            beforeRouteLeave

单独路由独享组件

           beforeEnter

 路由传值的方式：

Vue-router 传参可以分为两大类，分别是编程式的导航 router.push 和声明式的导航

1、router.push

    1.1）字符串：直接传递路由地址，但是不能传递参数

             this.$router.push("home")

对象：

    1.2）命名路由 这种方式传递参数，目标页面刷新会报错

             this.$router.push({name:"news",params:{userId:123})

    1.3）查询参数 和 name 配对的式 params，和 path 配对的是 query

             this.$router.push({path:"/news',query:{uersId:123})

1.4）接收参数 this.$route.query

2、声明式导航

    2.1）字符串

    2.2）命名路由

    2.3）查询参数

Query 和 params 之间的区别

1、query 更加类似于 get 传参，params 则类似于 post，query在浏览器的地址

栏中显示，params 不显示

2、params 传值一刷新就没了，query 传值刷新还存在

Vue 的路由实现模式：hash 模式和 history 模式

1、hash 模式：在浏览器中符号“#”，#以及#后面的字符称之为 hash，

     用 window.location.hash 读取。特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求         中；用来 指导浏览器动作，对服务端安全无用，hash 不会重加载页面

2、history 模式：history 采用 HTML5 的新特性，且提供了两个新方法：

      2.1）pushState()

      2.2）replaceState()可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状

              态变更

编程式导航使用的方法以及常用的方法

1、路由跳转：this.$router.push()

2、路由替换: this.$router.replace()

3、后退： this.$router.back()

4、前进 ：this.$router.forward()