vue-router简单使用(二)

路由对象

fullPath: "/" 
hash: ""
href: "/"
matched: [{…}]
meta: {}
name: undefined
params: {}
path: "/"
query: {}
redirectedFrom: undefined
[[Prototype]]: Object

导航守卫

全局前置守卫

router.beforeEach((to,from,next)=>{
    document.title = to.meta.title
    // to:   导航即将要进入的路由    ->  路由对象
    // from: 当前导航正要离开的路由  ->  路由对象
    // this: undefined
    next()
})

全局解析守卫

// 每次导航时都会触发，
// 但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后
router.beforeResolve((to,from,next)=>{
    // to:   导航即将要进入的路由    ->  路由对象
    // from: 当前导航正要离开的路由  ->  路由对象
    // this: undefined
    next()
})

全局后置钩子

// 不接受next()
// 不能改变导航本身
// 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
router.afterEach((to,from,failure)=>{
    if (!failure) sendToAnalytics(to.fullPath)
})

路由独享守卫

// 只在进入路由时触发
// params、query 或 hash 改变不会触发
beforeEnter(to,from,next)
-------------------------------------------
const routes = [
    {
        path:"/user/:userid",
        name:"user",
        beforeEnter: (to, from, next) => {
            // to:   导航即将要进入的路由    ->  路由对象
            // from: 当前导航正要离开的路由  ->  路由对象
            // this: undefined
            next()
        },
        component:() =>import("@/components/user"),
    }
]

组件内的守卫

// 进入路由前调用
// /about  ->  /home, 但是  /home ->  /home/news 并不会触发
beforeRouteEnter(to, from) {
    // to:   导航即将要进入的路由    ->  路由对象
    // from: 当前导航正要离开的路由  ->  路由对象
    // this: undefined
}

// 动态路由发生修改时调用 
// 如/user/:userid  /user/777 -> /user/888 不要直接在浏览器URL里面输入
beforeRouteUpdate(to, from) {
    // to:   导航即将要进入的路由    ->  路由对象
    // from: 当前导航正要离开的路由  ->  路由对象
    // this -> proxy
}

// 路由离开时调用
// 如 /home  ->  /about
// 或 /home/news -> /about
beforeRouteLeave(to, from) {
    // to:   导航即将要进入的路由    ->  路由对象
    // from: 当前导航正要离开的路由  ->  路由对象
    // this -> proxy
} 

记录状态

单个组件

// vue3与vue2不一样
// 全部组件都记录状态
App.vue
--------------------------------------
<template>
<div>
  <router-link to="/home">home</router-link>  
  <router-link to="/about">about</router-link>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</div>
</template>

// 记录单个状态的
router.js
----------------------------------------------
const routes = [
    {
        path:"/about",
        meta:{
            title:"关于",
            // 如果keepAlive为true,则代表需要记录状态
            // 如果keepAlive为false,或者没有设置->underfined->false,则渲染时走下面的
            keepAlive:true
        },
        component:() =>import("@/components/about")
    }
]
App.vue
-------------------------------------------------
<template>
<div>
  <router-link to="/home">home</router-link>  
  <router-link to="/about">about</router-link>
  <router-view v-slot="{ Component }">
    <keep-alive >
      // 保留状态的在这里渲染     $route.meta.keepAlive为true
      <component :is="Component" v-if="$route.meta.keepAlive"/>
    </keep-alive>
      // 没有保留状态的在这里渲染 $route.meta.keepAlive为false
      <component :is="Component" v-if="!$route.meta.keepAlive"/>
  </router-view>
</div>
</template>

多层组件

router.js
----------------------------------------------------------
const routes = [
    {
        path:"/home",
        component:() =>import("@/components/home"),
        alias:"/",
        meta:{
            title:"主页",
            keepAlive:true
        },
        children:[
            {
                path:"news",
                component:() =>import("@/components/homenews")
            },
            {
                path:"acg",
                component:() =>import("@/components/homeacg")
            }
        ]
    }
]
App.vue
--------------------------------------------------------------
<router-view v-slot="{ Component }">
    <keep-alive >
      <component :is="Component" v-if="$route.meta.keepAlive"/>
    </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive"/>
</router-view>
home.vue
---------------------------------------------------------------
<script>
export default {
    name:"home",
    data() {
      return {
        path:'/home'
      }
    },
    // 被 keep-alive 缓存的组件激活时调用。
    // 进入时路由设置成 this.path
    activated() {
      this.$router.push(this.path)
    },
    // 路由离开时调用 把path设置成离开的路由
    beforeRouteLeave (to, from, next) {
      this.path = from.path
      next()
    }
}
</script>