一、路由傳參
1、 params 參數(shù)
路由配置
{
path:'/index',
// 重定向到指定的路由
redirect:'/'
},
{
// 注意：這里的路由需要傳一個(gè)參數(shù)净宵，路由可以傳多個(gè)參數(shù)
path:'/city/:id',
// 設(shè)置該選項(xiàng)為true孟害，組件可以通過props選項(xiàng)接收路由參數(shù)
props:true,
component:City
},
// *號拒炎，表示匹配不上的所有路由
{
path:'*',
component:Error404
}
頁面
<li @click="$router.push(`/city/${item.id}`)" v-for="(item,index) in citys" :key="index">{{item.name}}</li>
// 使用props選項(xiàng)接收路由參數(shù)
props:["id"],
created() {
// $route返回的是當(dāng)前路由信息，它身上有一個(gè)params屬性挨务，該屬性里面保存的是當(dāng)前路由信息的參數(shù)击你。
// console.log(this.$route);
// console.log(this.$route.params.id);
// 從路由參數(shù)中獲取城市編號
// let cityId = this.$route.params.id
// 再根據(jù)城市編號，獲取對應(yīng)的城市信息
// this.city = this.citys.find(c=>c.id==cityId)
this.city = this.citys.find(c=>c.id==this.id)
},
v-html指令
<!-- 所有由ref修飾的組件或標(biāo)簽耘子，都會保存到$refs中 -->
<!-- <div ref="content"></div> -->
<!-- v-html指令果漾，用于渲染html內(nèi)容 -->
<div v-html="city.content"></div>
<!-- v-text指令，用于渲染文本內(nèi)容 -->
<!-- <div v-text="city.content"></div> -->
mounted() {
this.$refs.content.innerHTML = this.city.content
},
2谷誓、query參數(shù)
<!-- 路由地址绒障，采用query傳參方式：?參數(shù)1=XXX&參數(shù)2=XXX... -->
<li @click="$router.push(`/type?id=${item.id}`)"
v-for="(item,index) in types" :key="index">{{item.name}}</li>
created() {
// 通過$route.query獲取路由地址?后面的參數(shù)
// console.log(this.$route.query);
this.type = this.types.find(t=>t.id==this.$route.query.id)
}
3、router 和router和route
// $router返回的是當(dāng)前項(xiàng)目中的路由器對象
// $route返回的是當(dāng)前路由信息
// 判斷當(dāng)前路由信息捍歪，不是/news户辱，添加到/news
if(this.$route.path != '/news'){
this.$router.push('/news')
}
4、 vue.config.js
// 引入nodejs內(nèi)置模塊path
let path = require('path')
// 注意：該配置文件中糙臼，只能使用commonjs模塊化語法
module.exports = {
// 關(guān)閉 eslint-loader 語法檢查
lintOnSave:false,
// 配置devServer開發(fā)服務(wù)器
devServer:{
// 端口號
port: 5566,
// 自動打開
open:true,
// 靜態(tài)資源路徑
// 注意：__dirname是nodejs的內(nèi)置變量庐镐，返回的是的當(dāng)前項(xiàng)目的絕對路徑
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'),
}
}
}
}
二、路由進(jìn)階
1变逃、路由模式
// 路由模式
// 有兩種模式：hash模式（默認(rèn)） 和 history模式
// hash模式必逆，使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點(diǎn)是路徑帶有#號名眉，不夠美觀粟矿。
// history模式，使用的是瀏覽器中內(nèi)置的history對象實(shí)現(xiàn)路由的跳轉(zhuǎn)损拢，這種方式不兼容老版本的瀏覽器陌粹，刷新后會丟失路由信息。
mode:'hash'
2福压、路由元信息
{
path:'/',
name:'home',
// meta選項(xiàng)掏秩，用于配置路由的元信息，里面的內(nèi)容是自定義的荆姆，用于配置路由的數(shù)據(jù)
meta:{
title:'首頁'
},
// 路由組件懶加載
component:()=>import('../pages/Home.vue'),
}
3蒙幻、 nprogress加載進(jìn)度條
安裝
npm install nprogress
導(dǎo)入
// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";
在導(dǎo)航守衛(wèi)中使用
// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
// to 返回去哪里的路由信息
// from 返回從哪來的路由信息
// next方法，用于跳轉(zhuǎn)
// 開啟loading
NProgress.start();
// 通常：在這里會做一些權(quán)限驗(yàn)證操作
next();
});
// 2.路由后置守衛(wèi)--路由跳轉(zhuǎn)完成
router.afterEach((to, from) => {
// 通常：在這里會做一些頁面的修改操作
document.title = to.meta.title;
// 結(jié)束loading
NProgress.done();
});
4胞枕、二級路由
//配置子路由信息
children:[
//手機(jī)訂單路由
{
path:'phoneOrder',
name:'phoneOrder',
meta:{
title:'手機(jī)訂單'
},
component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
}
]
5杆煞、路由懶加載
// 路由組件懶加載
component:()=>import('../pages/Home.vue')
6、路由分組懶加載
// 路由組件分組懶加載
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')
7腐泻、scoped
scoped屬性决乎，用于設(shè)置局部樣式，當(dāng)前組件中的樣式只對當(dāng)前組件生效
<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;
//&符號表示當(dāng)前元素
&.first{
font-size: 40px;
}
}
}
}
</style>
9、lass
安裝
npm install lass@3 lass-loader@7 -D
使用
<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用于緩存路由組件，默認(rèn)情況下會緩存打開的所有組件员魏，
如果需要指定緩存哪些組件丑蛤，通過include屬性指定。 -->
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>
2撕阎、路由組件特有的兩個(gè)生命周期
// 路由組件激活狀態(tài)生命周期函數(shù)
activated() {
// 開啟定時(shí)器
this.timer = setInterval(() => {
this.count++
}, 1000);
},
// 路由組件失活狀態(tài)生命周期函數(shù)
deactivated() {
clearInterval(this.timer)
},
