vue router

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link
>

事件里面跳转：

1、this.$router.push({path:'/two'})

this.$router.push({
  path:'/o_management', //路由
  query:{ //参数
    uid:011,
    state:6
  }
})

query 传参用name ,path都可以，params传参只能用name

//读取 路由参数接收 this.name = this.$route.params.userId; this.age = this.$route.query .plan;

路由传值的方式有几种
1、path路径属性传值。例如：path:"/home/:id/name";  接受的时候通过 this.$route.params
2、query传值。因为在url中？后面的参数不会被解析，因此我们可以通过query进行传值。 接受的时候通过 this.$route.query
3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受
4、编程式导航  this.$router.push({path:"/home",query:{}});


路由配置项常用的属性及作用
路由配置参数：    path : 跳转路径
    component : 路径相对于的组件
    name:命名路由
    children:子路由的配置参数(路由嵌套)
    props:路由解耦
    redirect : 重定向路由

编程式导航使用的方法以及常用的方法
路由跳转 ： this.$router.push()
路由替换  : this.$router.replace()
后退： this.$router.back()
前进 ：this.$router.forward()


重定向路由
通过配置路由项中的redirect进行重定向


实现路由解耦
在路由的配置项中设置props:true  在需要接受组件的内部通过props进行接受

如何检测路由参数的变化
通过属性监听来实现或者beforeRouterUpdate()
watch:{    "$router"(){   
    } }
beforeRouterUpdate(to,from,next);

路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法
1、什么是路由守卫？       路由跳转前后做的一些验证
2、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
使用的场景 beforeRouteEnter:当路由进入之前:登陆验证、热力图的记录、
beforeRouteUpdate:当路由进行更新的时候。如果当前路由发生了变化，但是不需要组件的创建销毁的过程的 时候，就需要用到这个钩子函数
beforeRouterLeave:当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保存的时 候......

全局守卫
beforeEach:全局守卫。验证用户是否登陆
router.beforeEach((to,from,next)=>{     //登陆状态    let status = false;    //所以路由组建的name名字    const nextRouter = ["two","three","detail"];
    if(nextRouter.indexOf(to.name)>=0){              if(!status){                   router.push({name:"login"})                }else{                   next();                }     }else{              next();        } })