vue中路由vue-router的使用和生命周期

vue-router

Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。

vue-router的使用

1.在项目src文件夹下新建名为router的文件夹

2.在router文件夹下新建index.js

3.在main.js中配置使用

vue-router跳转传参

路由传参有两种方式

声明式

<router-link :to="..." />

编程式

router.push(...)

1.通过query传参

query传参会把参数显示在地址栏，类似于get传参，但是如果网页刷新参数不会丢失

1.使用组件声明式跳转

<router-link :to="{path:'/test1',query:{id:11,content:'test跳转过来的'}}" >跳转到test1</router-link>

2.使用js代码编程式跳转

 this.$router.push({
   path:"test1",
     query:{
         id:11,
         content:"test跳转过来的"
     }
     
 })

3.接收传过来的参数

test1
<span>id:  {{$route.query.id}}</span>
<span>内容:  {{$route.query.content}}</span>

2.params

params传参不用显示在地址栏，类似于post传参，但是如果网页刷新参数会丢失
params传参需要在配置路由的时候给路由一个name属性

1.使用组件声明式跳转

<router-link :to="{name:'test1',params:{id:11,content:'test跳转过来的'}}" >跳转到test1</router-link>

2.使用js代码编程式跳转

 this.$router.push({
     name:"test1",
      params:{
          id:11,
          content:"test跳转过来的"
      }
      
  })

3.接收传过来的参数

test1
<span>id:  {{$route.params.id}}</span>
<span>内容:  {{$route.params.content}}</span>

3.采用url传参

设置路由配置的path属性
例子：带两个参数id和content

1.使用组件声明式跳转

<router-link to="test1/11/test跳转过来的" >跳转到test1</router-link>

2.使用js代码编程式跳转

 this.$router.push('test1/11/test跳转过来的')

3.接收传过来的参数

test1
<span>id:  {{$route.params.id}}</span>
<span>内容:  {{$route.params.content}}</span>

vue-router的生命周期

1.全局钩子函数

定义在全局的路由对象中

beforeEach     进入新路由之前执行
beforeResolve  
afterEach      进入新路由之后执行

全局钩子函数在定义全局路由的文件进行使用，src/router/index.js

全局前置守卫beforeEach

接收三个参数：
to：即将要进入的路由目标
from：当前正要离开的路由
next：一定要调用该方法来resolve这个钩子
next()：进入下一个钩子，进入新的路由
next(false)：中断当前路由跳转
next(’/’)或者next({path:’/’})：跳转到另一个路由目标

全局后置钩子afterEach

不会接收next函数，也不会改变导航本身

一般前置守卫比较常用，可以用来登录验证，以及单页面引用规定网页面等等

2.单独路由独享的钩子

 beforeEnter     在指定路由配置上直接定义

beforeEnter

这个守卫的参数和用法和全局前置守卫是一样的。

3.组件内的钩子函数

定义在组件的router的选项中

 beforeRouteEnter  进入组件之前被调用
 beforeRouteUpdate 不同路由组件被重复使用的时候被调用
 beforeRouteLeave  离开该组件的时候被调用