一荐开、書寫習(xí)慣
（1）在components下新建組件header ，跳轉(zhuǎn)的router都放在這里
因?yàn)橐３諥pp.vue不臃腫
<div class="header">
<router-link to="/home">首頁</router-link>
<router-link to="/type">分類</router-link>
</div>
<router-view></router-view>
（2）并在app全局組件中引入這個(gè)組件蒲拉，注冊义辕，使用
<template>
<div id="app">
03.使用組件
<Header></Header>
<router-view></router-view>
</div>
</template>
<script>
01.導(dǎo)入組件
import Header from './components/Header.vue'
export default {
name: 'App',
02.注冊組件
components:{
Header
}
}
</script>
二双妨、路由中的重定向
（1）路由重定向redirect
routes:[
{
path:'',
重定向，如果path地址為空蔓腐，會(huì)默認(rèn)跳轉(zhuǎn)到home頁面
redirect:'/home'
},
{
path:'/index',
重定向矩乐，如果path地址為/index，為默認(rèn)跳轉(zhuǎn)到home頁面
redirect:'/home'
},]
（2）/表示是根路徑回论，router-view在哪根路徑就是哪散罕，這里把根路徑放在在app.vue中
export default new VueRouter({
routes:[
{
path:'/',
name:'home',
component:Home
}
]
})
（3）路徑設(shè)置為*，表示跳轉(zhuǎn)未配置的路由地址傀蓉，都會(huì)默認(rèn)跳轉(zhuǎn)404頁面
{
path:'*',
name:'error404',
component:Error404
}
（4）點(diǎn)擊圖片返回首頁
實(shí)現(xiàn)過程欧漱，給img綁定點(diǎn)擊事件，通過替換當(dāng)前路由對象地址完成跳轉(zhuǎn)操作
<template>
<div class="error404">
<img src="../assets/img/404.jpg" @click="gotoHome">
</div>
</template>
<script>
export default {
name: "Error404",
methods: {
gotoHome(){
//回到首頁
//replace()方法跳轉(zhuǎn)葬燎，不保留歷史記錄,用戶無法點(diǎn)擊返回
this.$router.replace('/home')
}
},
};
</script>
<style scoped>
圖片居中覆蓋底層內(nèi)容
.error404{
background-color: white;
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
}
.error404 img{
height: 100%;
}
</style>
http://localhost:8080/#/type/1001
去除提示
"eslintConfig"
"rules": {
"no-unused-vars":"off"
}
三误甚、路由傳參的方式
路由傳參的方式有兩種：
1.通過開啟props參數(shù)，并在組件內(nèi)部接收props:[]谱净，并監(jiān)聽接收到的參數(shù)進(jìn)行賦值調(diào)用實(shí)現(xiàn)頁面數(shù)據(jù)切換
2.通過?id='1001'傳參窑邦，this.$route的query接收參數(shù)
（1）/:id傳參，$route的params接收
①配置路由頁面配置路徑/:id傳遞參數(shù)
②$route返回當(dāng)前路由信息壕探，它里面的params保存的是路由參數(shù)
③查找當(dāng)前l(fā)ists列表ID等于傳遞過來路徑的參數(shù)的那一項(xiàng),并賦給定義的空對象
④這個(gè)方法不能連續(xù)點(diǎn)擊跳轉(zhuǎn)頁面冈钦，如果需要連續(xù)跳轉(zhuǎn)要結(jié)合開啟props
//Header.vue
<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">鎮(zhèn)江</router-link>
<router-link to="/type/1003">無錫</router-link>
<router-link to="/type/1004">蘇州</router-link>
//Type.vue
<h2>{{city.city}}</h2>
<h2>{{city.content}}</h2>
//router的index.js
{
//只有輸入type/x，才正常出現(xiàn)李请，只輸入type會(huì)報(bào)錯(cuò)
path:'/type/:id',
name:'type',
component:Type
},
//Type.vue
created(){
console.log(this.$route);
let {params:{id}}=this.$route
this.city= this.lists.find(r=>r.id==id)
}, //這個(gè)id是通過點(diǎn)擊后params里傳過來的瞧筛，不能連續(xù)跳轉(zhuǎn)
通過props組件的屬性
①開啟組件屬性接收參數(shù)（路由參數(shù)通過組件的props屬性來接收）
②設(shè)置組件props接收傳遞的參數(shù)/:id厉熟，所有是props接收id參數(shù)
③開啟監(jiān)聽器以對象形式，一開始執(zhí)行一遍（對象的話可以可通過開啟deep:true较幌，來開啟深度監(jiān)聽）揍瑟。通過監(jiān)聽id獲取到的數(shù)據(jù)，再寫方法遍歷數(shù)組中id相等的那一項(xiàng)賦值給創(chuàng)建的空對象city乍炉，最后在監(jiān)聽器中調(diào)用方法月培，只要數(shù)據(jù)發(fā)生變化就會(huì)調(diào)用一次方法
//Header.vue
<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">鎮(zhèn)江</router-link>
<router-link to="/type/1003">無錫</router-link>
<router-link to="/type/1004">蘇州</router-link>
//Type.vue
<h2>{{city.city}}</h2>
<h2>{{city.content}}</h2>
//router的index.js
{
path:'/type/:id',
props:true,
name:'type',
component:Type,
},
//Type.vue
props:['id'],
methods: {
getData(){
this.city=this.lists.find(r=>r.id==this.id)
} 這個(gè)this.id是通過監(jiān)聽屬性得來的數(shù)據(jù)，好處每次變動(dòng)可以連續(xù)跳轉(zhuǎn)
},
watch:{
//開啟監(jiān)聽
id:{ //監(jiān)聽對象的形式恩急，開啟深度監(jiān)聽
//一開始執(zhí)行一次
immediate:true,
//房產(chǎn)返回兩個(gè)值，現(xiàn)在的和過去的纪蜒，由于對象賦值是改變地址衷恭，所有過去的值為 undefined
handler(){
this.getData()
}
}
}
（2）通過?id=xx傳參，獲取是在this.$route里的query纯续。
深度偵聽當(dāng)前路由信息
①不需要修改路由随珠，偵聽當(dāng)前路由變化，結(jié)構(gòu)出當(dāng)前路由query傳遞參數(shù)猬错，遍歷出與當(dāng)前id相等的一項(xiàng)賦值給空對象
<router-link to="/news?id=1001">廣州市大規(guī)模遷移砍伐城市樹木窗看，市委副書記等10人被問責(zé)</router-link>
<router-link to="/news?id=1002">提前結(jié)課離校!北大等部分在京高校調(diào)整期末考試及寒假安排</router-link>
watch: {
$route: {
immediate: true,
handler() {
let { query: { id }} = this.$route;
this.news = this.lists.find((r) => r.id == id);
},
},
},
②多個(gè)參數(shù)
<router-link to="/news?id=1001&name=123&age=19">提前結(jié)課離校！</router-link>
模板字符串多內(nèi)容的顯示
（1）通過獲取標(biāo)簽倦炒，設(shè)置標(biāo)簽的html內(nèi)容显沈，此方法必須是在監(jiān)聽id，并執(zhí)行id同時(shí)使用逢唤。
此方法雖可跳轉(zhuǎn)但控制臺(tái)會(huì)報(bào)錯(cuò)
<h2 id="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的鹽水鴨真好吃</li>
<li>南京的夫子廟真好玩</li>
</ul>`
}]
mounted() {
// 通過獲取標(biāo)簽修改hrml的值為當(dāng)前城市的內(nèi)容
document.querySelector('#content').innerHTML=this.city.content
},
//開啟監(jiān)聽
watch:{
//監(jiān)聽對象的形式拉讯，開啟深度監(jiān)聽
id:{
//一開始執(zhí)行一次
immediate:true,
//返回兩個(gè)值，現(xiàn)在的和過去的鳖藕，由于對象賦值是改變地址魔慷，所有過去的值為undefined
handler(){
this.getData()
document.querySelector('#content').innerHTML=this.city.content
}
}
}
（2）使用ref
頁面正常跳轉(zhuǎn)，但此方法控制臺(tái)同會(huì)報(bào)錯(cuò)
<h2 ref="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的鹽水鴨真好吃</li>
<li>南京的夫子廟真好玩</li>
</ul>`
}]
mounted() {
// 通過獲取標(biāo)簽修改hrml的值為當(dāng)前城市的內(nèi)容
this.$refs.content.innerHTML=this.city.content
},
//開啟監(jiān)聽
watch:{
//監(jiān)聽對象的形式著恩，開啟深度監(jiān)聽
id:{
//一開始執(zhí)行一次
immediate:true,
//返回兩個(gè)值院尔，現(xiàn)在的和過去的，由于對象賦值是改變地址喉誊，所有過去的值為undefined
handler(){
this.getData()
this.$refs.content.innerHTML=this.city.content
}
}
}
（3）推薦方法v-html
①通過v-html指令邀摆，可以渲染富文本內(nèi)容（包含html信息的內(nèi)容）
② v-text指令，渲染文本內(nèi)容
<div v-html="city.content"></div>
<h2 id="content"></h2>
lists:[
{
id:1001,
city:'南京',
content:` <ul>
<li>南京的鹽水鴨真好吃</li>
<li>南京的夫子廟真好玩</li>
</ul>`
}]
//開啟監(jiān)聽
watch:{
//監(jiān)聽對象的形式裹驰，開啟深度監(jiān)聽
id:{
//一開始執(zhí)行一次
immediate:true,
//返回兩個(gè)值隧熙，現(xiàn)在的和過去的，由于對象賦值是改變地址幻林，所有過去的值為undefined
handler(){
this.getData()
}
}
}
總結(jié)今天的知識(shí)點(diǎn)贞盯，路由傳參的三種方式音念、路徑的配置和v-html渲染副文本內(nèi)容
