Vue中使用Router

安装vue-router

npm install --save vue-router@版本号

使用vue-router

新建router文件夹 ,在router文件夹下新建index.js文件，并在main.js中引入router

// index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

exprot default new VueRouter(
	routes: [
    {
      path: '/home/:id',
      naem: '',
      component: '',
      meta: {},
      children: [],
      // props第一种写法 值为对象，该对象中的key-value都会以props的形式传给component配置的组件
      props: {param1: xxx, param2: xxx, ...},
      // props第二种写法 值为布尔值，若布尔值为真，会把路由中所有的params以props的形式传给component配置的组件        
      props: true/false, 
      // props第三种写法 值为布函数，若布尔值为真，会把路由中所有的params以props的形式传给component配置的组件        
      props($route) {
        return {id: $route.query.id}
      },    
    }
  ]
)

// main.js
import router from '@/router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

模板中使用router

<router-link to="path"></router-link>
<!-- name和params联合使用 path不能和params联合使用  path中未配置，使用params中传递的参数会在刷新后丢失，devtools中无法查看 query中传递的参数刷新不会丢失，可在devtools中查看
-->
<router-link :to="{path: xxx, query: {xxx}}"></router-link> 
<router-link :to="{name: xxx, query: {xxx}}"></router-link>
<router-link :to="{name: xxx, params: {xxx}}"></router-link>
<!--router-link属性：
active-class： 链接激活时的css类名
replace： 路由跳转方式为replace
-->
<!-- 组建内容展示区域 -->
<router-view></router-view>
<!-- 缓存路由组件 -->
<keep-alive>
	<router-view></router-view>
</keep-alive>

编程式使用router

// 获取传递参数 path name meta等属性值
this.$route.query this.$route.params
// 跳转到指定的 hash 地址，并替换掉当前的历史记录
this.$router.replace()
// 跳转到指定 hash 地址，并增加一条历史记录
this.$router.push()
// 实现导航历史前进、后退
this.$router.go(n)
// 后退到上一个页面
this.$router.back()
// 前进到下一个页面
this.$router.forward()

路由守卫

// 前置路由守卫 初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  // 必须有一个出口
  next()
})

// 后置路由守卫 初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
	// 修改网页的title
  document.title = to.meta.title
})

// 独享路由守卫 写在路由配置项里
beforeEnter((to, from, next) => {
  // 必须有一个出口
  next()
})
	
// 组件内路由守卫 写在组件内 进入该组件时被调用
beforeRouterEnter((to, from, next) => {
  // 必须有一个出口
  next()
})

// 组件内路由守卫 写在组件内 离开该组件时被调用
beforeRouterLeave((to, from, next) => {
  // 必须有一个出口
  next()
})

路由器router的两种工作模式

对于一个url来说，#和其后面的内容为hash值，hash值不会包含在http请求中，即hash值不会带给服务器

hash模式
- 地址中含有#
- 兼容性较好
- 移动端问题
history模式
- router中添加 mode：history开启history模式
- 地址干净，无#
- 兼容性相比hash模式较差
- 页面刷新404问题

路由守卫和生命周期执行顺序

keep-alive缓存且首次进入1：beforeEach => beforeEnter1 => beforeRouteEnter1 => afterEach => beforeCreate1 => created1 => beforeMount1 => mounted1 => activated1

keep-alive缓存离开1进入2：beforeRouteLeave1 => beforeEach => beforeEnter2 => beforeRouteEnter2 => afterEach => beforeCreate2 => created2 => beforeMount2 => deactivated1 => mounted2 => activated1

keep-alive缓存且再次从2进入1：beforeRouteLeave2 => beforeEach => beforeEnter1 => beforeRouteEnter1 => afterEach => deactivated2 => activated1

未缓存首次进入1：beforeEach => beforeEnter1 => beforeRouteEnter1 => afterEach => beforeCreate1 => created1 => beforeMount1 => mounted1

未缓存离开1进入2：beforeRouteLeave1 => beforeEach => beforeEnter2 => beforeRouteEnter2 => afterEach => beforeCreate2 => created2 => beforeMount2 => beforeDestroy1 => destroyed1 => mounted2

未缓存且再次从2进入1：beforeRouteLeave2 => beforeEach => beforeEnter1 => beforeRouteEnter1 => afterEach => beforeCreate1 => created1 => beforeMount1 => beforeDestroy2 => destroyed2 => mounted1