一绑洛、路由傳參
1. params 參數(shù)
路由配置
{
// 注意：這里的路由需要傳一個參數(shù)管嬉，路由可以傳多個參數(shù)
// 如果是多個參數(shù)地技，可以寫 /type/:id/:name
path:'/type/:id',
// 設(shè)置該選項為true，組件可以通過props選項接收路由參數(shù)
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選項接收路由參數(shù)
props:["id"],
data() {
return {
city: {
id: 0,
name: "",
content: "",
},
list: [
{
id: 1001,
name: "南京",
content: "南京的鹽水鴨真好吃"
},
{
id: 1002,
name: "鎮(zhèn)江",
content: "鎮(zhèn)江的鍋蓋面真好吃"
}
],
};
},
methods: {
getData() {
this.city = this.list.find((r) => r.id == this.id);
},
},
created() {
// $route返回的是當(dāng)前路由信息柴底，它身上有一個params屬性婿脸，該屬性里面保存的是當(dāng)前路由信息的參數(shù)。
// 這種方法無法更新路由頁面
// let {params: { id }} = this.$route;
// this.city = this.list.find((r) => r.id == id);
},
watch: {
// 監(jiān)視id的變化
id: {
immediate: true,
handler() {
this.getData();
},
},
},
2.v-html指令
v-html指令似枕，可以渲染富文本內(nèi)容（包含html信息的內(nèi)容）盖淡。
v-text指令，渲染文本內(nèi)容凿歼。
當(dāng)需要渲染的數(shù)據(jù)是html內(nèi)容時褪迟，使用v-html指定。
<!-- 所有由ref修飾的組件或標簽答憔，都會保存到$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> -->
data() {
return {
city: {
id: 0,
name: "",
content: "",
},
list: [
{
id: 1001,
name: "南京",
content: `
<ul>
<li>南京的鹽水鴨真好吃</li>
<li>南京的老門東真好玩</li>
</ul>
`,
},
{
id: 1002,
name: "鎮(zhèn)江",
content: `
<div>
<button>鎮(zhèn)江</button>
<img src="https://img0.baidu.com/it/u=4141467167,4004418012&fm=26&fmt=auto">
</div>
`,
}
],
};
},
mounted() {
this.$refs.content.innerHTML = this.city.content
},
效果：點擊城市名切換對應(yīng)信息
3.query參數(shù)
路由地址虐拓，采用query傳參方式：?參數(shù)1=XXX&參數(shù)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()
}
}
},
效果：點擊新聞標題切換對應(yīng)信息
4.$router和$route
route返回的是當(dāng)前路由信息绍撞。
5.vue.config.js
vue.config.js 是一個可選的配置文件正勒，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載傻铣。
// 引入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)前項目的絕對路徑
// 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.路由規(guī)則redirect屬性重定向
redirect屬性：進行重定向URL地址阱驾。
{
path:'/index',
// 重定向到指定的路由/home
redirect:'/home'
},
2.添加404路由
// *號就谜，表示匹配不上的所有路由（未配置的所有路由地址）
{
path:'*',
component:Error404
}
3、命名路由
命名路由：在routes配置中給某個路由設(shè)置名稱里覆。
在跳轉(zhuǎn)路由時，可以根據(jù)路由的名稱(name)去跳轉(zhuǎn)缆瓣。
（1）params參數(shù)
{
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參數(shù)
{
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模式：使用的是錨鏈接的原理實現(xiàn)路由的跳轉(zhuǎn)隧甚，這種方式兼容性非常好；缺點是路徑帶有#號渡冻，不夠美觀戚扳。
history模式：使用的是瀏覽器中內(nèi)置的history對象實現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器族吻，刷新后會丟失路由信息帽借。
mode:'hash'
2.路由元信息
meta選項：用于配置路由的元信息，里面的內(nèi)容是自定義的超歌，用于配置路由的數(shù)據(jù)砍艾。
{
path:'/',
name:'home',
meta:{
title:'首頁',
// 可以在路由元信息里面配置路由的訪問權(quán)限
roles:['admin','vip','user']
},
// 路由組件懶加載
component:()=>import('../pages/Home.vue'),
}
3.導(dǎo)航守衛(wèi)
vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。其實巍举，導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過程中的一些鉤子函數(shù)脆荷。
（1）前置守衛(wèi)--路由跳轉(zhuǎn)之前
使用 router.beforeEach 注冊一個全局前置守衛(wèi)。每次跳轉(zhuǎn)路由之前懊悯，都會攔截蜓谋，next方法表示下一步。通常在這里會做一些權(quán)限驗證操作炭分。
to：返回去哪里的路由信息
from：返回從哪來的路由信息
next方法：用于跳轉(zhuǎn)
// 定義路由前置守衛(wèi)
// 每次跳轉(zhuǎn)路由之前桃焕，都會攔截，next方法表示下一步
router.beforeEach((to,from,next)=>{
// 獲取瀏覽器的緩存中欠窒，保存的當(dāng)前登錄用戶的權(quán)限
let role = sessionStorage.getItem('role')
// 驗證用戶訪問權(quán)限
if(to.meta.roles && to.meta.roles.includes(role)){
// next()方法覆旭，表示繼續(xù)向下執(zhí)行
next()
}
})
（2）后置守衛(wèi)--路由跳轉(zhuǎn)完成
使用 router.afterEach 注冊一個后置守衛(wèi)。通常在這里會做一些頁面的修改操作
router.afterEach((to,from)=>{
// 配置當(dāng)前頁的標題
document.title = to.meta.title
})
4.nprogress加載進度條
nprogress是頁面跳轉(zhuǎn)時出現(xiàn)在瀏覽器頂部的進度條岖妄。
（1）安裝
npm install nprogress
（2）導(dǎo)入
// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";
（3）在導(dǎo)航守衛(wèi)中使用
// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
// 開啟loading
NProgress.start();
// 通常：在這里會做一些權(quán)限驗證操作
next();
});
// 2.路由后置守衛(wèi)--路由跳轉(zhuǎn)完成
router.afterEach((to, from) => {
// 通常：在這里會做一些頁面的修改操作
document.title = to.meta.title;
// 結(jié)束loading
NProgress.done();
});
5.二級路由
需要先定義一級路由組件型将，確定好在哪個組件中配置二級路由，就去那個組件的配置規(guī)則中添加children關(guān)鍵字荐虐，按照一級路由的配置方法配置規(guī)則七兜。
{
path: '/one',
name: 'One',
component: ()=>import('@v/One.vue'),
meta:{
title:'One',
roles:['admin']
},
//定義one的二級路由信息
children:[
{
path:'nj',
name:'nj',
// 采用路由懶加載的方式，導(dǎo)入組件
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屬性礁叔，用于設(shè)置局部樣式，當(dāng)前組件中的樣式只對當(dāng)前組件生效迄薄。
注意：App組件中的樣式是全局樣式琅关，通常不加scoped。
<style scoped>
....
</style>
9.sass
Sass 是一個 CSS 預(yù)處理器讥蔽。使用sass可以定義嵌套定義樣式涣易，大大節(jié)省css代碼；使用sass可以使用定義變量勤篮，可以統(tǒng)一定義風(fēng)格都毒。
（1）安裝
npm install sass sass-loader@8 -D
（2）使用
&符號表示當(dāng)前元素。常見的兩種用法：偽類選擇器和偽元素碰缔。
<div class="one">
<h2>One</h2>
<div class="province">
江蘇省
<div class="city">
南京省
<div class="district">
雨花臺區(qū)
<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 預(yù)處理器。
注意：在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屬性指定巫击，該屬性可以傳一個數(shù)組禀晓，數(shù)組中定義組件的名稱。
作用：通過路由緩存坝锰，組件之間的切換就能保存上個組件的狀態(tài)粹懒，而不是切換之后又得重新操作。
<keep-alive :include="['Two','Three']">
<router-view/>
</keep-alive>
2.路由組件特有的兩個生命周期
當(dāng)路由組件采用緩存后顷级，created和mounted這兩個生命周期函數(shù)凫乖，只會在第一次執(zhí)行；并且destroyed這個生命周期函數(shù)不會執(zhí)行。
這時候帽芽，通常都會配合activated（路由組件激活狀態(tài)生命周期函數(shù)）和deactivated（路由組件失活狀態(tài)生命周期函數(shù)）這兩個生命周期鉤子删掀。
注意：只有當(dāng)組件在 <keep-alive> 內(nèi)被切換，才會有activated 和 deactivated 這兩個鉤子函數(shù)导街。
// 路由組件激活狀態(tài)生命周期函數(shù)
activated() {
console.log('路由組件激活');
// 開啟定時器
this.timer = setInterval(()=>{
this.count++
},1000)
},
// 路由組件失活狀態(tài)生命周期函數(shù)
deactivated() {
console.log('路由組件失活');
clearInterval(this.timer)
}
