(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
目錄
路由的封裝抽離
聲明式導(dǎo)航
導(dǎo)航鏈接?
兩個(gè)類(lèi)名?
自定義高亮類(lèi)名?
跳轉(zhuǎn)傳參
1. 查詢(xún)參數(shù)傳參
2. 動(dòng)態(tài)路由傳參
兩種傳參方式的區(qū)別?
Vue路由?
重定向
404
編程式導(dǎo)航
基本跳轉(zhuǎn)
路由傳參?
① path 路徑跳轉(zhuǎn)傳參?
② name 命名路由跳轉(zhuǎn)傳參?
?
路由的封裝抽離
問(wèn)題：所有的路由配置都堆在main.js中合適么？目標(biāo)：將路由模塊抽離出來(lái)。 好處： 拆分模塊，利于維護(hù)
絕對(duì)路徑：@指代src目錄，可以用于快速引入組件
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
// 創(chuàng)建了一個(gè)路由對(duì)象
const router = new VueRouter({
// routes 路由規(guī)則們
// route 一條路由規(guī)則 { path: 路徑, component: 組件 }
routes: [
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
]
})
export default router聲明式導(dǎo)航
導(dǎo)航鏈接?
需求：實(shí)現(xiàn)導(dǎo)航高亮效果 ?vue-router 提供了一個(gè)全局組件 router-link (取代 a 標(biāo)簽)① 能跳轉(zhuǎn) ，配置 to 屬性指定路徑( 必須 ) 。 本質(zhì)還是 a 標(biāo)簽 ， to 無(wú)需 #② 能高亮， 默認(rèn)就會(huì)提供 高亮類(lèi)名 ，可以直接設(shè)置高亮樣式
兩個(gè)類(lèi)名?
說(shuō)明：我們發(fā)現(xiàn) router-link 自動(dòng)給當(dāng)前導(dǎo)航添加了 兩個(gè)高亮類(lèi)名
① router-link-active 模糊匹配 (用的多)????????to="/my" 可以匹配 /my /my/a /my/b ....② router-link-exact-active 精確匹配????????to="/my" 僅可以匹配 /my
自定義高亮類(lèi)名?
說(shuō)明：router-link 的 兩個(gè)高亮類(lèi)名 太長(zhǎng)了，我們希望能定制怎么辦？ ?
跳轉(zhuǎn)傳參
目標(biāo)：在跳轉(zhuǎn)路由時(shí), 進(jìn)行傳值1. 查詢(xún)參數(shù)傳參2. 動(dòng)態(tài)路由傳參
1. 查詢(xún)參數(shù)傳參
① 語(yǔ)法格式如下????????to="/path ?參數(shù)名=值 "② 對(duì)應(yīng)頁(yè)面組件接收傳遞過(guò)來(lái)的值????????$route. query.參數(shù)名
<router-link to="/search?key=小周不擺爛">小周不擺爛</router-link><script>
export default {
name: 'MyFriend',
created () {
// 在created中，獲取路由參數(shù)
// this.$route.query.參數(shù)名 獲取
console.log(this.$route.query.key);
}
}
</script>2. 動(dòng)態(tài)路由傳參
① 配置動(dòng)態(tài)路由
② 配置導(dǎo)航鏈接????????to="/path /參數(shù)值 "③ 對(duì)應(yīng)頁(yè)面組件接收傳遞過(guò)來(lái)的值????????$route. params.參數(shù)名
兩種傳參方式的區(qū)別?
1. 查詢(xún)參數(shù)傳參 (比較適合傳 多個(gè)參數(shù) )????????① 跳轉(zhuǎn)：to="/path ?參數(shù)名=值&參數(shù)名2=值 "????????② 獲取：$route.query.參數(shù)名2. 動(dòng)態(tài)路由傳參 ( 優(yōu)雅簡(jiǎn)潔 ，傳單個(gè)參數(shù)比較方便)????????① 配置動(dòng)態(tài)路由：path: "/path/參數(shù)名"????????② 跳轉(zhuǎn)：to="/path /參數(shù)值 "????????③ 獲?。?route.params.參數(shù)名
Vue路由?
重定向
問(wèn)題： 網(wǎng)頁(yè)打開(kāi)， url 默認(rèn)是 / 路徑，未匹配到組件時(shí)，會(huì)出現(xiàn)空白說(shuō)明： 重定向 → 匹配path后, 強(qiáng)制跳轉(zhuǎn)path路徑語(yǔ)法： { path: 匹配路徑, redirect: 重定向到的路徑 },
// 創(chuàng)建了一個(gè)路由對(duì)象
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/search/:words?', component: Search }
]
})404
作用： 當(dāng)路徑找不到匹配時(shí)，給個(gè)提示頁(yè)面位置： 配在路由最后語(yǔ)法：path: "*" (任意路徑) – 前面不匹配就命中最后這個(gè)
?
編程式導(dǎo)航
基本跳轉(zhuǎn)
問(wèn)題：點(diǎn)擊按鈕跳轉(zhuǎn)如何實(shí)現(xiàn)？編程式導(dǎo)航：用JS代碼來(lái)進(jìn)行跳轉(zhuǎn)兩種語(yǔ)法:????????① path 路徑跳轉(zhuǎn) (簡(jiǎn)易方便)
????????② name 命名路由跳轉(zhuǎn)
路由傳參?
兩種傳參方式：查詢(xún)參數(shù) + 動(dòng)態(tài)路由傳參兩種跳轉(zhuǎn)方式，對(duì)于兩種傳參方式都支持：① path 路徑跳轉(zhuǎn)傳參② name 命名路由跳轉(zhuǎn)傳參
① path 路徑跳轉(zhuǎn)傳參?
query傳參
動(dòng)態(tài)路由傳參
?
② name 命名路由跳轉(zhuǎn)傳參?
?query傳參
?動(dòng)態(tài)路由傳參文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-622688.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-622688.html
到了這里，關(guān)于前端Vue入門(mén)-day06-路由進(jìn)階的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
