1. 路由模式
// 路由模式
// 有两种模式：hash模式（默认） 和 history模式
// hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
// history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。
mode:'hash'
2. 路由元信息
meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
{
path:'/',
name:'home',
meta:{
title:'首页'
},
// 路由组件懒加载
component:()=>import('../pages/Home.vue'),
}
之后在首页挂载完成之后使后台标题发生变化
<script>
export default {
mounted() {
document.title = "首页";
},
};
</script>
3. nprogress加载进度条
安装
npm install nprogress
导入
// 导入nprogress
import NProgress from "nprogress";
// 导入nprogress的样式
import "nprogress/nprogress.css";
在导航守卫中使用
// 导航守卫
// 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. 路由懒加载
// 路由组件懒加载
component:()=>import('../pages/Home.vue')
5. 路由分组懒加载
// 路由组件分组懒加载
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')
6. scoped
app组件中的样式是全局样式，通常不加scoped
style标签添加scoped属性，表示局部样式，这里定义的样式 只在当前组件中有效
<style scoped>
.car{
border: 1px solid blue;
padding: 5px;
}
h2{
color: pink;
}
</style>
router-link-exact-active 是精确匹配规则，即只有当前点击router被匹配
#nav a.router-link-exact-active {
color: #42b983;
}
7. sass
安装
npm install sass sass-loader@8 -D
如果出现Error: Cannot find module 'node-sass'
就在终端安装node-sass
npm i node-sass -D
-D是开发依赖
使用
<style scoped lang="scss">
// 使用sass可以定义嵌套定义样式，大大节省css代码
// lang="scss" 就表示下面的样式采用的sass语法编写。
// 使用sass可以定义变量
$red:red;
.about {
padding: 5px;
border: 1px solid pink;
h1 {
color: chartreuse;
}
p {
color: $red;
}
h3 {
color: $red;
}
.prov {
font-size: 30px;
color: green;
.city {
font-size: 25px;
color: red;
.dis {
font-size: 20px;
color: skyblue;
.street {
font-size: 15px;
color: purple;
}
}
}
}
}
</style>
8. less
安装
npm i less less-loader -D
注意：在less里面定义变量的符号是@
报错
npm i less-loader@7 -D
npm i less@3 -D
<style scoped lang="less">
...
</style>
