六、路由进阶、路由缓存、组件间传值

① 路由进阶

1. 路由模式

路由模式有两种模式：hash模式（默认） 和 history模式

hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#

号，不够美观。history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼

容老版本的浏览器，刷新后会丢失路由信息。

let router = new VueRouter({
    mode: 'hash',
})

2. 路由元信息

{
   path:'/',
   name:'home',
   // meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
   //路由元信息可以通过导航守卫获取
   meta:{
     title:'首页' 
},
{
   //路由重定向到首页
   path: '/first',
   redirect: '/'
},
{
   //路由重定向到首页
   path: '/index',
   redirect: '/'
},

3. nprogress加载进度条

安装

npm install nprogress

导入

import NProgress from "nprogress"; // 导入nprogress
import "nprogress/nprogress.css"; // 导入nprogress的样式

在导航守卫中使用

//添加路由前置守卫(路由跳转之前执行)
router.beforeEach((to, from, next) => {
    //to返回的是去哪里的路由信息
    //from返回的是从哪里的路由信息
    // console.log(to, from);
    // 开启loading
    NProgress.start();
    //next()方法表示继续向后执行，需要手动调用next()才能实现路由的跳转
    //通常：在这里会做一些权限验证操
    next()
})
//路由后置守卫(路由跳转完成后执行)
router.afterEach((to, from) => {
    // 通常：在这里会做一些页面的修改操作
    document.title = to.meta.title;
    // console.log(from);
    // 结束loading
    NProgress.done();
});

4. 嵌套路由和404路由

        {
            path: '/city',
            meta: {
                title: '城市页'
            },
            component: () => import('../components/City.vue'),
            children: [
                {
                    path: 'district/:city',
                    meta: {
                        title: '区县页'
                    },
                    props: true,
                    component: () => import('../components/District.vue'),
                    children: [
                        {
                            path: 'detail/:district',
                            props: true,
                            meta: {
                                title: '区县详情页'
                            },
                            component: () => import('../components/Detail.vue')
                        }
                    ]
                }
            ]
        },
        //定义404路由
        {
           // *号，表示匹配不上的所有路由
            path: '*',
            component: () => import('../components/Error404.vue')
        }

5. 路由懒加载

component:()=>import('../pages/Home.vue') // 路由组件懒加载

6. 路由分组懒加载

        {
            path: '/two',
            meta: {
                title: '列表页'
            },
            //有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。
            //只需要使用 命名 chunk (opens new window)，
            //一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
            // 路由组件分组懒加载 加上/* webpackChunkName: "XXX" */,同一个名字的进行预加载
            component: () => import(/* webpackChunkName: "detail" */'../components/Two.vue')
        },

7. scoped

scoped属性，用于设置局部样式，当前组件中的样式只对当前组件生效

<style scoped>
    ...
</style>

8. sass

安装

npm install sass sass-loader@8 -D

使用

<style scoped lang="scss">
    // lang="scss" 就表示下面的样式采用的sass语法编写。
    // 定义变量
    $c1:darksalmon;
    $c2:cornflowerblue;
   // 定义嵌套样式
    .main{
        border: 1px solid black;
        margin-top: 10px;
        padding: 5px;
        h2{
            color: $c2;
        }
        .one{
            border: 1px dashed darkgreen;
            padding: 5px;
            h2{
                color: $c1;
                //&符号表示当前元素
                &.first{
                   font-size: 40px;
                }
            }
        }
    }
</style>

② 路由缓存

1. keep-alive组件

<template>
  <div id="app">
    <!-- keep-alive用于缓存路由组件，默认情况下会缓存打开的所有组件，
    如果需要指定缓存哪些组件，通过include属性指定。 -->
    <keep-alive :include="['Detail', 'List', 'Home']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

2. 路由组件特有的两个生命周期

<script>
export default {
  name: "Home",
  data() {
    return {
      count: 0,
      timer: null,
    };
  },
  //=>这两个生命周期函数只在路由组件并且该组件缓存后可以使用
  // 路由组件激活状态生命周期函数
  activated() {
    this.timer = setInterval(() => {
      this.count++;
    }, 1000);
  },
  // 路由组件失活状态生命周期函数
  deactivated() {
    clearInterval(this.timer);
  },
};
</script>

③ 组件传值

1. 父子组件传值

父传子

props:['name','age'] // 接收父组件传值

子传父

this.$emit('updateName',this.myName) // 触发一个自定义事件

2. 祖孙组件传值

// 添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。
provide(){  
    return {
        car: this.car,
        job: this.job,
        //也可以直接添加依赖方法
        updateCar: this.updateCar,
    }}
// 注入祖级组件中的依赖数据，注意：跟props一样，接过来的数据是只读的，不能修改。
inject: ["car", "job", "updateCar"],

3. 兄弟组件传值

在Vue的原型对象上添加一个$bus属性，该属性的的属性值是一个Vue实例。这样Vue的所有实

例，都将共用同一个$bus。这个$bus属性，我们称之为：中央事件总线

Vue.prototype.$bus = new Vue() //在main.js导入
this.$bus.$emit("getAddress", "你好啊！"); //在一个组件触发事件
this.$bus.$on('getAddress',(e)=>{   //在另一个组件监听事件 e是传来的值
    this.address = e
})
//address =>你好啊！