一、路由传参

1. params 参数

（1）params 参数

路由配置

{
    // 注意：这里的路由需要传一个参数，路由可以传多个参数
    // 如果是多个参数，可以写 /type/:id/:name
    path:'/type/:id',
    // 设置该选项为true，组件可以通过props选项接收路由参数
    props:true,
    component:Type
}

页面

<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">无锡</router-link>

<h2>{{ city.name }}</h2>
<p>{{ city.content }}</p>

// 使用props选项接收路由参数
props:["id"],
  data() {
    return {
      city: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "南京",
          content: "南京的盐水鸭真好吃"
        },
        {
          id: 1002,
          name: "镇江",
          content: "镇江的锅盖面真好吃"
        }
      ],
    };
  },
  methods: {
    getData() {
      this.city = this.list.find((r) => r.id == this.id);
    },
  },
  created() {
    // $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
    // 这种方法无法更新路由页面 
    // let {params: { id }} = this.$route;
    // this.city = this.list.find((r) => r.id == id);
  },
  watch: {
    // 监视id的变化
    id: {
      immediate: true,
      handler() {
        this.getData();
      },
    },
  },

（2）v-html指令

v-html指令，可以渲染富文本内容（包含html信息的内容）。
v-text指令，渲染文本内容。
当需要渲染的数据是html内容时，使用v-html指定。

<!-- 所有由ref修饰的组件或标签，都会保存到$refs中 -->
<!-- <div ref="content"></div> -->
<!-- v-html指令，用于渲染html内容 -->
<div v-html="city.content"></div>
<!-- v-text指令，用于渲染文本内容 -->
<!-- <div v-text="city.content"></div> -->

  data() {
    return {
      city: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "南京",
          content: `
             <ul>
                <li>南京的盐水鸭真好吃</li>
                <li>南京的老门东真好玩</li>
             </ul>
          `,
        },
        {
          id: 1002,
          name: "镇江",
          content: `
             <div>
                <button>镇江</button>
                <img src="https://img0.baidu.com/it/u=4141467167,4004418012&fm=26&fmt=auto">
             </div>
          `,
        }
      ],
    };
  },
mounted() {
    this.$refs.content.innerHTML = this.city.content
},

效果：点击城市名切换对应信息

2、query参数

路由地址，采用query传参方式：?参数1=XXX&参数2=XXX

<router-link to="/news?id=1001">一坡一岭，护好美丽中国鲜明底色</router-link>
<router-link to="/news?id=1002">刘诗诗陈妍希一起练瑜伽</router-link>

<div class="news">
  <h2>{{ news.name }}</h2>
  <div v-html="news.content"></div>
</div>

  data() {
    return {
      news: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "一坡一岭，护好美丽中国鲜明底色",
          content: `
             <div>
                梯田层层绕山腰，五谷瓜果栽满沟，陕西省米脂县银州街道高西沟村，昔日荒山换新颜。
             </div>
          `,
        },
        {
          id: 1002,
          name: "刘诗诗陈妍希一起练瑜伽",
          content: `
             <div>
                <p>与众好友一起拍照的刘诗诗，扎着丸子头蜷着腿率性地坐在瑜伽垫上，只见她一手撑地一手比耶，心情看上去十分不错。</p>
                <img src="https://inews.gtimg.com/newsapp_bt/0/14290991287/1000">
             </div>
          `,
        }
      ],
    };
  },
  methods: {
    getData(){
      let { query: { id } } = this.$route;
      this.news = this.list.find((r) => r.id == id);
    }
  },
  watch: {
    $route: {
       immediate:true,
       handler(){
         this.getData()
       }
    }
  },

效果：点击新闻标题切换对应信息

3、$router和$route

$router返回的是当前项目中的路由器对象。
$route返回的是当前路由信息。

4、vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

// 引入nodejs内置模块path
let path = require('path')
// 注意：该配置文件中，只能使用commonjs模块化语法
module.exports = {
    // 关闭 eslint-loader 语法检查
    lintOnSave:false,
    // 配置devServer开发服务器
    devServer:{
        // 端口号
        port: 5566,
        // 自动打开
        open:true,
        // 静态资源路径
        // 注意：__dirname是nodejs的内置变量，返回的是的当前项目的绝对路径
        // contentBase: path.join(__dirname, "static")
    },
    // 用于配置原生的Webpack配置
    configureWebpack:{
        // 解析
        resolve:{
            // 定义路径别名
            alias:{
                "@c":path.resolve(__dirname,'src/components'),
                "@p":path.resolve(__dirname,'src/pages'),
                "@a":path.resolve(__dirname,'src/apis'),
                "@u":path.resolve(__dirname,'src/utils'),
            }
        }
    }
}

二、添加路由

1、路由规则redirect属性重定向

redirect属性：进行重定向URL地址。

{
    path:'/index',
    // 重定向到指定的路由/home
    redirect:'/home'
},

2、添加404路由

// *号，表示匹配不上的所有路由（未配置的所有路由地址）
{
    path:'*',
    component:Error404
}

3、命名路由

命名路由：在routes配置中给某个路由设置名称。
在跳转路由时，可以根据路由的名称(name)去跳转。

（1）params参数

{
    name:'type',
    path:'/type/:id',
    props:true,
    component:Type
}

页面

<router-link :to="{name:'type',params:{id:1001}}">南京</router-link>
<router-link to="/type/1002">无锡</router-link>

（2）query参数

{
    name:'news',
    path:'/news',
    component:News
}

页面

<router-link :to="{name:'news',query:{id:1001}}">一坡一岭，护好美丽中国鲜明底色</router-link>
<router-link to="/news?id=1002">刘诗诗陈妍希一起练瑜伽</router-link>

三、路由进阶

1、路由模式

路由模式有两种：hash模式（默认） 和 history模式。
hash模式：使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
history模式：使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。

mode:'hash'

2、路由元信息

meta选项：用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据。

{
    path:'/',
    name:'home',
    meta:{
        title:'首页',
        //  可以在路由元信息里面配置路由的访问权限
        roles:['admin','vip','user']
    },
    // 路由组件懒加载
    component:()=>import('../pages/Home.vue'),
}

3、导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。其实，导航守卫就是路由跳转过程中的一些钩子函数。

（1）前置守卫--路由跳转之前

使用 router.beforeEach 注册一个全局前置守卫。每次跳转路由之前，都会拦截，next方法表示下一步。通常在这里会做一些权限验证操作。
to：返回去哪里的路由信息
from：返回从哪来的路由信息
next方法：用于跳转

// 定义路由前置守卫
// 每次跳转路由之前，都会拦截，next方法表示下一步
router.beforeEach((to,from,next)=>{
  // 获取浏览器的缓存中，保存的当前登录用户的权限
  let role = sessionStorage.getItem('role')
  // 验证用户访问权限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表示继续向下执行
    next()
  }
})

（2）后置守卫--路由跳转完成

使用 router.afterEach 注册一个后置守卫。通常在这里会做一些页面的修改操作

router.afterEach((to,from)=>{
  // 配置当前页的标题
  document.title = to.meta.title
})

4、nprogress加载进度条

nprogress是页面跳转时出现在浏览器顶部的进度条。

（1）安装

npm install nprogress

（2）导入

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

（3）在导航守卫中使用

// 导航守卫
// 1.路由前置守卫--路由跳转之前
router.beforeEach((to, from, next) => {
  // 开启loading
  NProgress.start();
  // 通常：在这里会做一些权限验证操作
  next();
});

// 2.路由后置守卫--路由跳转完成
router.afterEach((to, from) => {
  // 通常：在这里会做一些页面的修改操作
  document.title = to.meta.title;
  // 结束loading
  NProgress.done();
});

5、二级路由

需要先定义一级路由组件，确定好在哪个组件中配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则。

  {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定义one的二级路由信息
    children:[
      {
        path:'nj',
        name:'nj',
        // 采用路由懒加载的方式，导入组件
        component:()=>import('../views/city/Nj.vue'),
        meta:{
          title:'南京'
        }
      },
      {
        path:'sz',
        name:'sz',
        component:()=>import('../views/city/Sz.vue'),
        meta:{
          title:'深圳'
        }
      }
    ]
  },

App.vue

<router-link to="/">Home</router-link> |
<router-link to="/one">One</router-link> |
<router-link to="/two">Two</router-link> |
<!-- 该路由视图，匹配一级路由 -->
<router-view></router-view>

One.vue

<router-link to="/one/nj">南京</router-link> | 
<router-link to="/one/sz">深圳</router-link> |
<!-- 这里的路由视图，匹配one的二级路由 -->
<router-view></router-view>

6、路由懒加载

使用路由懒加载，是为了给客户更好的体验，首页组件加载速度更快一些，提高首屏性能。
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

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

7、路由分组懒加载

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name。

component: ()=>import(/* webpackChunkName: "a" */'../views/Home.vue')
component: () => import(/* webpackChunkName: "a" */'../views/About.vue')
component: () => import(/* webpackChunkName: "b" */'../views/One.vue')
component: () => import(/* webpackChunkName: "b" */'../views/Two.vue')

8、scoped

scoped属性，用于设置局部样式，当前组件中的样式只对当前组件生效。
注意：App组件中的样式是全局样式，通常不加scoped。

<style scoped>
    ....
</style>

9、sass

Sass 是一个 CSS 预处理器。使用sass可以定义嵌套定义样式，大大节省css代码；使用sass可以使用定义变量，可以统一定义风格。

（1）安装

npm install sass sass-loader@8 -D

（2）使用

&符号表示当前元素。常见的两种用法：伪类选择器和伪元素。

<div class="one">
    <h2>One</h2>
    <div class="province">
      江苏省
      <div class="city">
        南京省
        <div class="district">
          雨花台区
          <div class="street">赛虹桥街道</div>
        </div>
      </div>
    </div>
    <h3>南京的鸭血粉丝真好吃</h3>
    <p>南京的盐水鸭真好吃</p>
</div>

<style scoped lang="scss">
$red:darkred;
.about{
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: $red;
  }
  p{
    color: $red;
  }
  .province{
    color: $red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

效果：

10、less

less 也是一个 CSS 预处理器。
注意：在less里面定义变量的符号是@。

（1）安装

npm i less@3 -D
npm i less-loader@7 -D

（2）使用

<style scoped lang="less">
@red:darkred;
.one {
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: @red;
  }
  p{
    color: @red;
  }
  .province{
    color: @red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

效果：

四、路由缓存

1、keep-alive组件

keep-alive：用于缓存路由组件，默认情况下会缓存打开的所有组件。如果需要指定缓存哪些组件，通过include属性指定，该属性可以传一个数组，数组中定义组件的名称。
作用：通过路由缓存，组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。

<keep-alive :include="['Two','Three']">
  <router-view/>
</keep-alive>

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

当路由组件采用缓存后，created和mounted这两个生命周期函数，只会在第一次执行；并且destroyed这个生命周期函数不会执行。
这时候，通常都会配合activated（路由组件激活状态生命周期函数）和deactivated（路由组件失活状态生命周期函数）这两个生命周期钩子。
注意：只有当组件在 <keep-alive> 内被切换，才会有activated 和 deactivated 这两个钩子函数。

    // 路由组件激活状态生命周期函数
    activated() {
        console.log('路由组件激活');
        // 开启定时器
        this.timer = setInterval(()=>{
            this.count++
        },1000)
    },
    // 路由组件失活状态生命周期函数
    deactivated() {
        console.log('路由组件失活');
        clearInterval(this.timer)
    }