路由介紹
1.思考
單頁面應用程序,之所以開發效率高,性能好,用戶體驗好
最大的原因就是:頁面按需更新
比如當點擊【發現音樂】和【關注】時,只是更新下面部分內容,對于頭部是不更新的
要按需更新,首先就需要明確:訪問路徑和 組件的對應關系!
訪問路徑 和 組件的對應關系如何確定呢? 路由
2.路由的介紹
生活中的路由:設備和ip的映射關系
Vue中的路由:路徑和組件的映射關系
3.總結
- 什么是路由
- Vue中的路由是什么
路由的基本使用
1.目標
認識插件 VueRouter,掌握 VueRouter 的基本使用步驟
2.作用
修改地址欄路徑時,切換顯示匹配的組件
3.說明
Vue 官方的一個路由插件,是一個第三方包
4.官網
Vue Router
5.VueRouter的使用(5+2)
固定5個固定的步驟(不用死背,熟能生巧)
- 下載 VueRouter 模塊到當前工程,版本3.6.5
yarn add vue-router@3.6.5
- main.js中引入VueRouter
import VueRouter from 'vue-router'
- 安裝注冊
Vue.use(VueRouter)
- 創建路由對象
const router = new VueRouter()
- 注入,將路由對象注入到new Vue實例中,建立關聯
new Vue({render: h => h(App),router:router
}).$mount('#app')
當我們配置完以上5步之后 就可以看到瀏覽器地址欄中的路由 變成了 /#/的形式。表示項目的路由已經被Vue-Router管理了
6.代碼示例
main.js
// 路由的使用步驟 5 + 2
// 5個基礎步驟
// 1. 下載 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安裝注冊 Vue.use(Vue插件)
// 4. 創建路由對象
// 5. 注入到new Vue中,建立關聯import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')
7.兩個核心步驟
- 創建需要的組件 (views目錄),配置路由規則
- 配置導航,配置路由出口(路徑匹配的組件顯示的位置)
App.vue
<div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a>
</div>
<div class="top"><router-view></router-view>
</div>
8.總結
- 如何實現 路徑改變,對應組件 切換,應該使用哪個插件?
- Vue-Router的使用步驟是什么(5+2)?
組件的存放目錄問題
注意: .vue文件 本質無區別
1.組件分類
.vue文件分為2類,都是 .vue文件(本質無區別)
- 頁面組件 (配置路由規則時使用的組件)
- 復用組件(多個組件中都使用到的組件)
2.存放目錄
分類開來的目的就是為了 更易維護
- src/views文件夾
頁面組件 - 頁面展示 - 配合路由用 - src/components文件夾
復用組件 - 展示數據 - 常用于復用
3.總結
- 組件分類有哪兩類?分類的目的?
- 不同分類的組件應該放在什么文件夾?作用分別是什么?
路由的封裝抽離
問題:所有的路由配置都在main.js中合適嗎?
目標:將路由模塊抽離出來。 ?好處:拆分模塊,利于維護
路徑簡寫:
腳手架環境下 @指代src目錄,可以用于快速引入組件
聲明式導航-導航鏈接
1.需求
實現導航高亮效果
如果使用a標簽進行跳轉的話,需要給當前跳轉的導航加樣式,同時要移除上一個a標簽的樣式,太麻煩!!!
2.解決方案
vue-router 提供了一個全局組件 router-link (取代 a 標簽)
- 能跳轉,配置 to 屬性指定路徑(必須) 。本質還是 a 標簽 ,to 無需 #
- 能高亮,默認就會提供高亮類名,可以直接設置高亮樣式
語法: 發現音樂
<div><div class="footer_wrap"><router-link to="/find">發現音樂</router-link><router-link to="/my">我的音樂</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的組件所展示的位置 --><router-view></router-view></div></div>
3.通過router-link自帶的兩個樣式進行高亮
使用router-link跳轉后,我們發現。當前點擊的鏈接默認加了兩個class的值 router-link-exact-active
和router-link-active
我們可以給任意一個class屬性添加高亮樣式即可實現功能
4.總結
- router-link是什么?
- router-link怎么用?
- router-link的好處是什么?
聲明式導航-兩個類名
當我們使用跳轉時,自動給當前導航加了兩個類名
1.router-link-active
模糊匹配(用的多)
to="/my" ?可以匹配 /my ? ?/my/a ? ?/my/b ? ?....
只要是以/my開頭的路徑 都可以和 to="/my"匹配到
2.router-link-exact-active
精確匹配
to="/my" 僅可以匹配 ?/my
3.在地址欄中輸入二級路由查看類名的添加
4.總結
- router-link 會自動給當前導航添加兩個類名,有什么區別呢?
聲明式導航-自定義類名(了解)
1.問題
router-link的兩個高亮類名 太長了,我們希望能定制怎么辦
2.解決方案
我們可以在創建路由對象時,額外配置兩個配置項即可。 linkActiveClass
和linkExactActiveClass
const router = new VueRouter({routes: [...],linkActiveClass: "類名1",linkExactActiveClass: "類名2"
})
3.代碼演示
// 創建了一個路由對象
const router = new VueRouter({routes: [...], linkActiveClass: 'active', // 配置模糊匹配的類名linkExactActiveClass: 'exact-active' // 配置精確匹配的類名
})
4.總結
如何自定義router-link的兩個高亮類名
聲明式導航-查詢參數傳參
1.目標
在跳轉路由時,進行傳參
比如:現在我們在搜索頁點擊了熱門搜索鏈接,跳轉到詳情頁,需要把點擊的內容帶到詳情頁,改怎么辦呢?
2.跳轉傳參
我們可以通過兩種方式,在跳轉的時候把所需要的參數傳到其他頁面中
- 查詢參數傳參
- 動態路由傳參
3.查詢參數傳參
- 如何傳參?
- 如何接受參數
固定用法:$router.query.參數名
4.代碼演示
App.vue
<template><div id="app"><div class="link"><router-link to="/home">首頁</router-link><router-link to="/search">搜索頁</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>
Home.vue
<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">熱門搜索:<router-link to="">黑馬程序員</router-link><router-link to="">前端培訓</router-link><router-link to="">如何成為前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script><style>
.logo-box {height: 150px;background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
</style>
Search.vue
<template><div class="search"><p>搜索關鍵字: 黑馬程序員</p><p>搜索結果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中,獲取路由參數}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>
router/index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 創建了一個路由對象
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search', component: Search }]
})export default router
main.js
...
import router from './router/index'
...
new Vue({render: h => h(App),router
}).$mount('#app')
五、聲明式導航-動態路由傳參
1.動態路由傳參方式
- 配置動態路由
動態路由后面的參數可以隨便起名,但要有語義
const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
})
- 配置導航鏈接
to="/path/參數值" - 對應頁面組件接受參數
$route.params.參數名
params后面的參數名要和動態路由配置的參數保持一致
2.查詢參數傳參 VS 動態路由傳參
- 查詢參數傳參 ?(比較適合傳多個參數)
-
- 跳轉:to="/path?參數名=值&參數名2=值"
- 獲取:$route.query.參數名
- 動態路由傳參 (優雅簡潔,傳單個參數比較方便)
-
- 配置動態路由:path: "/path/:參數名"
- 跳轉:to="/path/參數值"
- 獲取:$route.params.參數名
注意:動態路由也可以傳多個參數,但一般只傳一個
3.總結
聲明式導航跳轉時, 有幾種方式傳值給路由頁面?
- 查詢參數傳參(多個參數)
- 動態路由傳參(一個參數,優雅簡潔)
動態路由參數的可選符(了解)
1.問題
配了路由 path:"/search/:words" ?為什么按下面步驟操作,會未匹配到組件,顯示空白?
2.原因
/search/:words ?表示,必須要傳參數。如果不傳參數,也希望匹配,可以加個可選符"?"
const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})
Vue路由-重定向
1.問題
網頁打開時, url 默認是 / 路徑,未匹配到組件時,會出現空白
2.解決方案
重定向 → 匹配 / 后, 強制跳轉 /home 路徑
3.語法
{ path: 匹配路徑, redirect: 重定向到的路徑 },比如:{ path:'/' ,redirect:'/home' }
4.代碼演示
const router = new VueRouter({routes: [{ path: '/', redirect: '/home'},...]})
Ve路由-404
1.作用
當路徑找不到匹配時,給個提示頁面
2.位置
404的路由,雖然配置在任何一個位置都可以,但一般都配置在其他路由規則的最后面
3.語法
path: "*" ? (任意路徑) – 前面不匹配就命中最后這個
import NotFind from '@/views/NotFind'const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一個]
})
4.代碼示例
NotFound.vue
<template><div><h1>404 Not Found</h1></div>
</template><script>
export default {}
</script><style></style>
router/index.js
...
import NotFound from '@/views/NotFound'
...// 創建了一個路由對象
const router = new VueRouter({routes: [...{ path: '*', component: NotFound }]
})export default router
九、Vue路由-模式設置
1.問題
路由的路徑看起來不自然, 有#,能否切成真正路徑形式?
- hash路由(默認) ? ? ? ?例如: ?http://localhost:8080/#/home
- history路由(常用) ? ? 例如: http://localhost:8080/home ? (以后上線需要服務器端支持,開發環境webpack給規避掉了history模式的問題)
2.語法
const router = new VueRouter({mode:'histroy', //默認是hashroutes:[]
})
編程式導航-兩種路由跳轉方式
1.問題
點擊按鈕跳轉如何實現?
2.方案
編程式導航:用JS代碼來進行跳轉
3.語法
兩種語法:
- path 路徑跳轉 (簡易方便)
- name 命名路由跳轉 (適合 path 路徑長的場景)
4.path路徑跳轉語法
特點:簡易方便
//簡單寫法
this.$router.push('路由路徑')//完整寫法
this.$router.push({path: '路由路徑'
})
5.代碼演示 path跳轉方式
6.name命名路由跳轉
特點:適合 path 路徑長的場景
語法:
- 路由規則,必須配置name配置項
{ name: '路由名', path: '/path/xxx', component: XXX },
- 通過name來進行跳轉
this.$router.push({name: '路由名'
})
7.代碼演示通過name命名路由跳轉
8.總結
編程式導航有幾種跳轉方式?
編程式導航-path路徑跳轉傳參
1.問題
點擊搜索按鈕,跳轉需要把文本框中輸入的內容傳到下一個頁面如何實現?
2.兩種傳參方式
1.查詢參數
2.動態路由傳參
3.傳參
兩種跳轉方式,對于兩種傳參方式都支持:
① path 路徑跳轉傳參
② name 命名路由跳轉傳參
4.path路徑跳轉傳參(query傳參)
//簡單寫法
this.$router.push('/路徑?參數名1=參數值1&參數2=參數值2')
//完整寫法
this.$router.push({path: '/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
接受參數的方式依然是:$route.query.參數名
5.path路徑跳轉傳參(動態路由傳參)
//簡單寫法
this.$router.push('/路徑/參數值')
//完整寫法
this.$router.push({path: '/路徑/參數值'
})
接受參數的方式依然是:$route.params.參數值
注意:path不能配合params使用
十二、編程式導航-name命名路由傳參
1.name 命名路由跳轉傳參 (query傳參)
this.$router.push({name: '路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
2.name 命名路由跳轉傳參 (動態路由傳參)
this.$router.push({name: '路由名字',params: {參數名: '參數值',}
})
3.總結
編程式導航,如何跳轉傳參?
1.path路徑跳轉
- query傳參
this.$router.push('/路徑?參數名1=參數值1&參數2=參數值2')
this.$router.push({path: '/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
- 動態路由傳參
this.$router.push('/路徑/參數值')
this.$router.push({path: '/路徑/參數值'
})
2.name命名路由跳轉
- query傳參
this.$router.push({name: '路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
- 動態路由傳參 (需要配動態路由)
this.$router.push({name: '路由名字',params: {參數名: '參數值',}
})