vuejs学习5.4 vue-router

$route和 $router的区别

$route表示活跃的路由
$router表示vue-router对象

导航守卫

任何的vue实例和组件都是有生命周期的
组件的生命周期：在创建时调用的函数为created（），组件挂载到DOM调用的函数为mounted，当界面发生更新时调用updated函数（例如：响应式时data发生改变，界面发生改变）
导航守卫：在界面跳转时检测监听路由的进入和离开，vue-router提供了beforeEach和afterEach会在即将改变前和改变后触发
例如：路由跳转时，title改变

created

方法1：在每个组件中添加对应修改title的代码，当组件被创建时调用created

created() {
      document.title = '首页'
    }

beforeEach（前置钩子）

方法2：使用vue-router提供的函数beforeEach（前置钩子）
在路由中添加属性meta

{
      path:'/home',
      component:Home,
      meta:{
        title:"首页",
      },
      children:[
        {
          path:'',
          redirect:'news',
        },
        {
          path:'news',
          component:News,
        },
        {
          path:'message',
          component: Message,
        }
      ]
    },

然后使用beforeEach函数，matched[0]是因为存在嵌套路由，取第一个表示使用标题首页，而不是子路由的标题

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

to表示即将进入的目标的路由对象
from表示到导航即将要离开的路由对象
next调用该方法后，才能进入下一个钩子

afterEach（后置钩子）

先调用前置钩子，后调用后置钩子

//后置钩子，不需要主动调用next函数
router.afterEach((to,from) =>{
  
})

keep-alive

默认在页面跳转时，组件会被销毁，所以跳转到之前显示过的页面时一直会显示默认路径页面
router-view是一个组件，如果直接被包在keep-alive里面，左右路径匹配的视图组件会被缓存
在Home中默认路径删除，之后使用activated（页面活跃时相应，只有在该组件保持了状态使用了keep-alive才有效，相反是deactivated）进行路由跳转

// A code block
var foo = 'bar';

使用keep-alive，对组件不进行销毁

<keep-alive>
      <router-view/>
    </keep-alive>

使用activated进行默认跳转，使用组件内导航守卫，记录当前页面的路径，下次进入时，显示当前路径

data(){
      return {
        path:'/home/news'
      }
    },
activated() {
      this.$router.push(this.path)
    },
    beforeRouteLeave(to,from,next){
      this.path = this.$route.path;
      next();
    }

如果某个组件需要频繁的销毁，不需要缓存
exclude属性：排除内容
User为User.vue中的name即User组件的name

<keep-alive exclude="User,HomeNews">
      <router-view/>
    </keep-alive>

include属性：包含的内容，需要缓存的组件