1、路由的封裝抽離
將之前寫在main.js文件中的路由配置與規則抽離出來，放置在router/index.js文件中，再將其導入回main.js文件中，即可實現路由的封裝抽離
例如
//index.js
import { createMemoryHistory, createRouter } from 'vue-router'import HisPage from '../views/HisPage.vue'
import MyPage from '../views/MyPage.vue'const routes = [{ path: '/his', component: HisPage },{ path: '/my', component: MyPage },
]const router = createRouter({history: createMemoryHistory(),routes,
})export default router在main.js內部引入
import router from './router/index.js'同樣在vue對象中進行注入即可
2、聲明式導航-導航鏈接
Vue-router提供了一個全局組件router-link（取代a標簽）
屬性變成to，且無需#
1、能跳轉，配置to屬性指定路徑（必須）。本質還是a標簽，to無需#
2、能高亮，默認就會提供高亮類名，可以直接設置高亮樣式
* 兩個類名
說明：router-link自動給當前導航添加了兩個高亮類名
1、router-link-active 模糊匹配（用的多）
? ? ? ? to=“/my” ?可以匹配 /my /my/a /my/b? ...
2、router-link-exact-active 精確匹配
? ? ? ? to="/my" 僅可以匹配 /my
說明：router-link的兩個高亮類名太長了
在router的配置項中加上
linkActiveClass:"類名1"
linkExactActiveClass:"類名2"可以通過配置項定制類名
* 跳轉傳參
在跳轉路由時，進行傳值
1、查詢參數傳參
語法格式如下
? ? ? ? to="/path?參數名=值[&參數名=值]
對應頁面組件接收傳遞過來的值
? ? ? ? $route.query.參數名
2、動態路由傳參
? ? ? ? 配置動態路由
router: [...,{path: '/.../:參數名',component: ...}
]? ? ? ? 配置導航鏈接
? ? ? ? to="/path/參數值"
? ? ? ? 對應頁面組件接收傳遞過來的值
? ? ? ? $route.params.參數名
注：/path/:參數名表示，必須要傳參數。如果不傳參數也希望匹配，可以加個可選符“?”
* vue路由-重定向
問題：網頁打開，url默認是/路徑，未匹配到組件時，會出現空白
說明：重定向 -> 匹配path后，強制跳轉path路徑
語法： {path: 匹配路徑，redirect: 重定向的路徑}
* vue路由-404
作用：當路徑找不到匹配時，給個提示頁面
位置：配在路由最后
語法：path：“*”（任意路徑）-前面不匹配就命中最后這個
* vue路由-模式設置
問題：路由的路徑看起來不自然，有#，能否切成真正路徑形式
hash路由（默認） 例如：http://localhost:8080/#/home
history路由（常用） 例如：http://localhost:8080/home（以后上線需要服務器端支持）
const router = new VueRouter({routes,mode: "history"
})3、編程式導航-基本跳轉
問題：點擊按鈕跳轉如何實現
編程式導航：用js代碼來進行跳轉
兩種語法：
1、path路徑跳轉（簡易方便）
this.$router.push('路由路徑')this.$router.push({path:'路由路徑'
})2、name命令路由跳轉(適合path路徑長的場景）
this.$router.push({name: '路由名'
}){name: '路由名', path: '/path', component: XXX}* 編程式導航-路由傳參
問題：點擊搜索按鈕時，跳轉需要傳參如何實現
1、path路徑跳轉傳參（query傳參）
this.$router.push('/路徑?參數名1=參數值1&參數名2=參數值2)this.$router.push({path:'/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})并且使用$route.query.參數名進行獲取
2、path路徑跳轉傳參（動態路由傳參）
this.$router.push('/路徑/參數值')this.$router.push({path: '/路徑/參數值'
})3、name命名路由跳轉傳參（query傳參）
this.$router.push({name:'路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})4、name命名路由跳轉傳參（動態路由傳參）
this.$router.push({name:'路由名字',params: {參數名1: '參數值1',參數名2: '參數值2'}
})同樣理由$route.params.參數名進行獲取
