Vue-Cli—03.路由传参数 / 路由进阶 / 路由缓存 /sass|less

一、路由传参

1. params 参数

路由配置

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

页面

南京
无锡

{{ city.name }}
{{ city.content }}

// 使用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指定。

  data() {
    return {
      city: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "南京",
          content: `
             

                
南京的盐水鸭真好吃
                
南京的老门东真好玩
             
          `,
        },
        {
          id: 1002,
          name: "镇江",
          content: `
             

                镇江
                
             
          `,
        }
      ],
    };
  },
mounted() {
    this.$refs.content.innerHTML = this.city.content
},

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

3.query参数

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

一坡一岭，护好美丽中国鲜明底色
刘诗诗陈妍希一起练瑜伽

  
{{ news.name }}
  

  data() {
    return {
      news: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "一坡一岭，护好美丽中国鲜明底色",
          content: `
             

                梯田层层绕山腰，五谷瓜果栽满沟，陕西省米脂县银州街道高西沟村，昔日荒山换新颜。
             
          `,
        },
        {
          id: 1002,
          name: "刘诗诗陈妍希一起练瑜伽",
          content: `
             

                
与众好友一起拍照的刘诗诗，扎着丸子头蜷着腿率性地坐在瑜伽垫上，只见她一手撑地一手比耶，心情看上去十分不错。
                
             
          `,
        }
      ],
    };
  },
  methods: {
    getData(){
      let { query: { id } } = this.$route;
      this.news = this.list.find((r) => r.id == id);
    }
  },
  watch: {
    $route: {
       immediate:true,
       handler(){
         this.getData()
       }
    }
  },

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

4.$router和$route

route返回的是当前路由信息。

5.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
}

页面

南京
无锡

（2）query参数

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

页面

一坡一岭，护好美丽中国鲜明底色
刘诗诗陈妍希一起练瑜伽

三、路由进阶

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

Home |
One |
Two |

One.vue

南京 | 
深圳 |

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。

9.sass

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

npm install sass sass-loader@8 -D

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

    
One
    

      江苏省
      

        南京省
        

          雨花台区
          
赛虹桥街道
        
      
    
    
南京的鸭血粉丝真好吃
    
南京的盐水鸭真好吃

效果：

10、less
less 也是一个 CSS 预处理器。
注意：在less里面定义变量的符号是@。
（1）安装

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

（2）使用

效果：

四、路由缓存

1、keep-alive组件

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

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

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

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