Vue2|浅学一下路由吧(router和route+导航守卫+keep-alive）2

配置接上篇，都是非常简单看一眼就能看懂的组件，我们在main.js和User里面打印一下router

这是User组件

1.router和route

<template>
  <div>
    <h2>i am user page</h2>
    <p>i am the information of user</p>
    <h2>{{userId}}</h2>
    <button @click="btnClick">BUTTTON</button>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    userId () {
      // 路由映射中谁处于活跃，this.$route就是谁
      return this.$route.params.userId
    }
  },
  methods: {
    btnClick () {
      console.log(this.$router)
    }
  }
}
</script>

<style>
</style>

这是main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
console.log(router)

是同一个router对象

 我们再在user里面打一下route

 

 this.$route是当前活跃的路由，而$router是index.js里面的Router

2.全局导航守卫

导航守卫：监听跳转的过程

应用场景：

  在什么都不点的时候，这个地方显示Home,在显示user information的时候，这里显示user,go profile的时候显示profile

普通修改方式：

通过created生命周期函数修改，但是如果页面多的时候，难以维护

  created () {
    console.log('created')
    document.title = 'User'
  },

导航守卫：

在index.js写路由映射加一个meta，然后再在beforeEach每次跳转的时候修改document.title

  {
      path: '/home',
      name: 'HelloWorld',
      component: Home,
      meta: {
        title: '首页'
      },

router.beforeEach((to, from, next) => {
  // 从from到to
  document.title = to.matched[0].meta.title
  next()
})

这个跳转之前的函数我们称之为前置守卫(guard)

补充：后置钩子(hook)跳转之后

router.afterEach((to, from) => {
  console.log('------')
})

这两个守卫，我们称之为全局守卫

官方文档里面还有路由守卫和组件守卫

3.keep-alive

router-view也是组件，如果包在keep-alive里面，匹配到的视图组件都会被缓存

在生命周期函数里面打印一下

 

 点击go home 和go about，我们可以看知道，组件被频繁的创建和销毁

keep-alive是vue内置的一个组件，可以使被包含的组件保留状态

 

给视图层包一个keep-alive标签

 

这个时候就不会被频繁的销毁和创建了

Home组件里面的activated & deactivated

这两个只有在组件被keep-alive包的时候才有效

需求：点home里面message然后再跳到user，回来的时候保留message的状态

 用到了组件内导航，当组件离开时，记录组件this.$route.path的值，如果点message之后点别的组件，23行记录的是message的路径,从Home组件内的message去别的组件时，会保留message的路径，下次activated时保留

keep-alive有两个属性：exclude include

    <keep-alive exclude="Profile">
          <router-view/>
    </keep-alive>

这个时候Profile组件被排除在外