一、路由传参

1、paramsc参数

路由配置

{
    path:'/index',
    // 重定向到指定的路由
    redirect:'/'
},
{
    // 注意：这里的路由需要传一个参数，路由可以传多个参数
    path:'/city/:id',
    // 设置该选项为true，组件可以通过props选项接收路由参数
    props:true,
    component:City
},
// *号，表示匹配不上的所有路由
{
    path:'*',
    component:Error404
}

使用props选项接收路由参数

props:["id"],
created() {
    // $route返回的是当前路由信息，它身上有一个params属性，该属性里面保存的是当前路由信息的参数。
    // console.log(this.$route);
    // console.log(this.$route.params.id);
    // 从路由参数中获取城市编号
    // let cityId = this.$route.params.id
    // 再根据城市编号，获取对应的城市信息
    // this.city = this.citys.find(c=>c.id==cityId)
    this.city = this.citys.find(c=>c.id==this.id)
},

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> -->

mounted() {
    this.$refs.content.innerHTML = this.city.content
},

2、query参数

<!-- 路由地址，采用query传参方式：?参数1=XXX&参数2=XXX... -->
<li @click="$router.push(`/type?id=${item.id}`)" 
    v-for="(item,index) in types" :key="index">{{item.name}}</li>

created() {
    // 通过$route.query获取路由地址?后面的参数 
    // console.log(this.$route.query);
    this.type = this.types.find(t=>t.id==this.$route.query.id)
}

3、router和route

// $router返回的是当前项目中的路由器对象  
// $route返回的是当前路由信息
// 判断当前路由信息，不是/news，添加到/news
if(this.$route.path != '/news'){
    this.$router.push('/news')
}

4、vue.config.js

// 引入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、路由模式

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

2、路由元信息

{
    path:'/',
    name:'home',
    // meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
    meta:{
        title:'首页'
    },
    // 路由组件懒加载
    component:()=>import('../pages/Home.vue'),
}

3、nprogress加载进度条

3.1安装

npm install nprogress

3.2导入

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

3.3在导航守卫中使用

/ 导航守卫
// 1.路由前置守卫--路由跳转之前
router.beforeEach((to, from, next) => {
  // to 返回去哪里的路由信息
  // from 返回从哪来的路由信息
  // next方法，用于跳转

  // 开启loading
  NProgress.start();

  // 通常：在这里会做一些权限验证操作
  next();
});

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

  // 结束loading
  NProgress.done();
});

4、二级路由

//配置子路由信息
children:[
    //手机订单路由
    {
        path:'phoneOrder',
        name:'phoneOrder',
        meta:{
            title:'手机订单'
        },
        component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
    }
]

4、路由懒加载

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

5、路由分组懒加载

// 路由组件分组懒加载
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')

6、scoped

<style scoped>
/* scoped属性，用于设置局部样式，当前组件中的样式只对当前组件生效 */
.home{
  border: 1px dashed black;
  padding: 5px;
}
h2{
  color: red;
}
</style>

7、sass

7.1安装

npm install sass sass-loader@8 -D

7.2使用

<style scoped lang='scss'>
//使用sass可以定义嵌套样式，大大节约css代码
//使用sass可以定义变量，可以统一定义变量。
$red: orange;
.about {
  border: 1px solid black;
  padding: 5px;
  h2 {
    color: black;
  }
  h3 {
    color: $red;
  }
  p {
    color: $red;
  }
  .province {
    color: blueviolet;
    font-size: 30px;
    .city {
      color: brown;
      font-size: 25px;
      .district {
        color: burlywood;
        font-size: 20px;
        .street {
          color: cornflowerblue;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

8、less

8.1安装

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

8.2使用

<style scoped lang='less'>
//注意：在less里面定义变量的符号是@
@red:skyblue;
.one {
  border: 1px solid black;
  padding: 5px;
  h2 {
    color: black;
  }
  h3 {
    color: @red;
  }
  p {
    color: @red;
  }
  .province {
    color: blueviolet;
    font-size: 30px;
    .city {
      color: brown;
      font-size: 25px;
      .district {
        color: burlywood;
        font-size: 20px;
        .street {
          color: cornflowerblue;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

三、路由缓存

1、keep-alive组件

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

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

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