1 路由介紹
1.思考
單頁面應用程序，之所以開發(fā)效率高，性能好，用戶體驗好
最大的原因就是：頁面按需更新
比如當點擊【發(fā)現(xiàn)音樂】和【關注】時，只是更新下面部分內(nèi)容，對于頭部是不更新的
要按需更新，首先就需要明確：訪問路徑和 組件的對應關系！
訪問路徑 和 組件的對應關系如何確定呢？ 路由
2.路由的介紹
生活中的路由：設備和ip的映射關系
Vue中的路由：路徑和組件的映射關系
3.總結
- 什么是路由
- Vue中的路由是什么
2 路由的基本使用
1.目標
認識插件 VueRouter，掌握 VueRouter 的基本使用步驟
2.作用
修改地址欄路徑時，切換顯示匹配的組件
3.說明
Vue 官方的一個路由插件，是一個第三方包
4.官網(wǎng)
https://v3.router.vuejs.org/zh/
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) -
創(chuàng)建路由對象
const router = new VueRouter() -
注入，將路由對象注入到new Vue實例中，建立關聯(lián)
new Vue({ render: h => h(App), router:router }).$mount('#app')
當我們配置完以上5步之后 就可以看到瀏覽器地址欄中的路由 變成了 /#/的形式。表示項目的路由已經(jīng)被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. 創(chuàng)建路由對象
// 5. 注入到new Vue中，建立關聯(lián)
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化
const router = new VueRouter()
new Vue({
render: h => h(App),
router
}).$mount('#app')
7.兩個核心步驟
- 創(chuàng)建需要的組件 (views目錄)，配置路由規(guī)則
-
配置導航，配置路由出口(路徑匹配的組件顯示的位置)
App.vue
<div class="footer_wrap"> <a href="#/find">發(fā)現(xiàn)音樂</a> <a href="#/my">我的音樂</a> <a href="#/friend">朋友</a> </div> <div class="top"> <router-view></router-view> </div>
8.總結
- 如何實現(xiàn) 路徑改變，對應組件 切換,應該使用哪個插件?
- Vue-Router的使用步驟是什么(5+2)?
3 組件的存放目錄問題
注意： .vue文件 本質(zhì)無區(qū)別
1.組件分類
.vue文件分為2類，都是 .vue文件（本質(zhì)無區(qū)別）
- 頁面組件 （配置路由規(guī)則時使用的組件）
- 復用組件（多個組件中都使用到的組件）
2.存放目錄
分類開來的目的就是為了 更易維護
-
src/views文件夾
頁面組件 - 頁面展示 - 配合路由用
-
src/components文件夾
復用組件 - 展示數(shù)據(jù) - 常用于復用
3.總結
- 組件分類有哪兩類？分類的目的？
- 不同分類的組件應該放在什么文件夾？作用分別是什么？
4 路由的封裝抽離
問題：所有的路由配置都在main.js中合適嗎？
目標：將路由模塊抽離出來。 好處：拆分模塊，利于維護
路徑簡寫：
腳手架環(huán)境下 @指代src目錄，可以用于快速引入組件
5 Vue路由-重定向
1.問題
網(wǎng)頁打開時， url 默認是 / 路徑，未匹配到組件時，會出現(xiàn)空白
2.解決方案
重定向 → 匹配 / 后, 強制跳轉 /home 路徑
3.語法
{ path: 匹配路徑, redirect: 重定向到的路徑 },
比如：
{ path:'/' ,redirect:'/home' }
4.代碼演示
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home'},
...
]
})
6 Vue路由-404
1.作用
當路徑找不到匹配時，給個提示頁面
2.位置
404的路由，雖然配置在任何一個位置都可以，但一般都配置在其他路由規(guī)則的最后面
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文章來源：http://www.zghlxwxcb.cn/news/detail-678504.html
...
import NotFound from '@/views/NotFound'
...
// 創(chuàng)建了一個路由對象
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFound }
]
})
export default router
7 Vue路由-模式設置
1.問題
路由的路徑看起來不自然, 有#，能否切成真正路徑形式?文章來源地址http://www.zghlxwxcb.cn/news/detail-678504.html
- hash路由(默認) 例如: http://localhost:8080/#/home
- history路由(常用) 例如: http://localhost:8080/home (以后上線需要服務器端支持，開發(fā)環(huán)境webpack給規(guī)避掉了history模式的問題)
2.語法
const router = new VueRouter({
mode:'histroy', //默認是hash
routes:[]
})
到了這里，關于Vue2向Vue3過度核心技術路由的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
