[TOC] ### 一、Vue3.x中的路由 路由可以讓應用程序根據用戶輸入的不同地址動態掛載不同的組件。 [https://next.router.vuejs.org/](https://next.router.vuejs.org/) ~~~ npm install vue-router@next --save ~~~ ### **二、Vue3.x路由的基本配置** #### **1、安裝路由模塊** ~~~ npm install vue-router@next --save 或者 cnpm install vue-router@next --save ~~~ #### **2、新建組件** **components/Home.vue** ~~~ <template> <div> Home組件 </div> </template> <script lang="ts"> import { defineComponent, } from 'vue'; export default defineComponent({ name: 'Home', }); </script> <style> </style> ~~~ **components/News.vue** ~~~ <template> <div> News組件 </div> </template> <script lang="ts"> import { defineComponent, } from 'vue'; export default defineComponent({ name: 'News', }); </script> <style> </style> ~~~ #### **3、配置路由** 新建src/routes.ts 配置路由 ~~~ import {createRouter,createWebHashHistory} from 'vue-router' import Home from "./components/Home.vue" import News from "./components/News.vue" const router = createRouter({ // 4. Provide the history implementation to use. We are using the hash history for simplicity here. history: createWebHashHistory(), routes: [ { path: '/', component: Home }, { path: '/news', component: News } ], }) export default router ~~~ #### **4、掛載路由** 在main.ts中掛載路由 ~~~ import { createApp } from 'vue' import App from './App.vue' import router from './routes' // createApp(App).mount('#app') const app = createApp(App) //掛載路由 app.use(router) app.mount('#app') ~~~ #### **5、渲染組件** App.vue中通過router-view渲染組件 ~~~ <template> <ul> <li> <router-link to="/">首頁</router-link> </li> <li> <router-link to="/news">新聞</router-link> </li> </ul> <router-view></router-view> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App', }); </script> <style> </style> ~~~ ### 三、Vue3.x動態路由 **1、配置動態路由** ~~~ const router = createRouter({ // 4. Provide the history implementation to use. We are using the hash history for simplicity here. history: createWebHashHistory(), routes: [ { path: '/', component: Home }, { path: '/news', component: News }, { path: '/newsContent/:id', component: NewsContent }, ], }) ~~~ **2、路由跳轉** ~~~ <li v-for="(item,index) in list" :key="index"> <router-link :to="`/newsContent/${index}`">{{item}}</router-link> </li> ~~~ **3、獲取路由** ~~~ this.$route.params ~~~ ### 四、Vue3.x Get傳值 ~~~ <router-link to="/newsContent?id=2">Get傳值</router-link> ~~~ ~~~ this.$route.query ~~~ ### 五、Vue3.x路由編程式導航(Js跳轉路由) ~~~ this.$router.push({ path: 'news' }) ~~~ ~~~ this.$router.push({ path: '/newsContent/495' }); ~~~ ~~~ this.$router.push({ path: '/newscontent', query:{aid:14} } ~~~ ~~~ this.$router.push({ path: '/newscontent/123'}) ~~~ ### 六、Vue3.x路由HTML5 History 模式和 hash 模式 #### 6.1、 hash 模式 ~~~ import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), routes: [ //... ], }) ~~~ ~~~ http://localhost:8080/#/user http://localhost:8080/#/news ~~~ **如果想把上面的路由改變成下面方式:** ~~~ http://localhost:8080/news http://localhost:8080/user ~~~ 我們就可以使用HTML5 History 模式 #### 6.2、 HTML5 History 模式 ~~~ import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ history: createWebHistory(), routes: [ //... ] }) ~~~ \*\*注意：\*\*開啟Html5 History模式后，發布到服務器需要配置偽靜態： [https://router.vuejs.org/zh/guide/essentials/history-mode.html](https://router.vuejs.org/zh/guide/essentials/history-mode.html) ### 七、Vue3.x命名路由 有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 `routes` 配置中給某個路由設置名稱。 ~~~ const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) ~~~ 要鏈接到一個命名路由，可以給 `router-link` 的 `to` 屬性傳一個對象： ~~~ <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> ~~~ 這跟代碼調用 `router.push()` 是一回事： ~~~ this.$router.push({ name: 'user', params: { userId: 123 }}) ~~~ 這兩種方式都會把路由導航到 `/user/123` 路徑。 ~~~ this.$router.push({name:'content',query:{aid:222}}) ~~~ ### 八、路由重定向 重定向也在`routes`配置中完成。要從重定向`/a`到`/b`： ~~~ const routes = [{ path: '/home', redirect: '/' }] ~~~ 重定向也可以針對命名路由： ~~~ const routes = [{ path: '/home', redirect: { name: 'homepage' } }] ~~~ 甚至使用函數進行動態重定向： ~~~ const routes = [ { // /search/screens -> /search?q=screens path: '/search/:searchText', redirect: to => { // the function receives the target route as the argument // we return a redirect path/location here. return { path: '/search', query: { q: to.params.searchText } } }, }, { path: '/search', // ... }, ] ~~~ #### 相對重定向 也可以重定向到相對位置： ~~~ const routes = [ { path: '/users/:id/posts', redirect: to => { // the function receives the target route as the argument // return redirect path/location here. }, }, ] ~~~ ### 九、路由別名 重定向是指用戶訪問時`/home`，URL將被替換`/`，然后與匹配`/`。但是什么是別名？ **別名`/`as`/home`表示用戶訪問時`/home`，URL保持不變`/home`，但將被匹配，就像用戶正在訪問時一樣`/`。** 以上內容可以在路由配置中表示為： ~~~ const routes = [{ path: '/', component: Homepage, alias: '/home' }] ~~~ 別名使您可以自由地將UI結構映射到任意URL，而不受配置的嵌套結構的約束。使別名以a開頭，`/`以使路徑在嵌套路由中是絕對的。您甚至可以將兩者結合起來，并為數組提供多個別名： ~~~ const routes = [ { path: '/users', component: UsersLayout, children: [ // this will render the UserList for these 3 URLs // - /users // - /users/list // - /people { path: '', component: UserList, alias: ['/people', 'list'] }, ], }, ] ~~~ 如果您的路線包含參數，請確保將其包含在任何絕對別名中： ~~~ const routes = [ { path: '/users/:id', component: UsersByIdLayout, children: [ // this will render the UserDetails for these 3 URLs // - /users/24 // - /users/24/profile // - /24 { path: 'profile', component: UserDetails, alias: ['/:id', ''] }, ], }, ] ~~~ ### 十、嵌套路由  配置News組件的子組件 #### **1、新建news/Add.vue** ~~~ <template> <div> 增加新聞 </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data(){ return{} },methods:{ } }) </script> ~~~ #### **2、新建news/Edit.vue** ~~~ <template> <div> 修改新聞 </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data(){ return{ } },methods:{ } }) </script> ~~~ #### 3、配置嵌套路由 ~~~ import { createRouter, createWebHistory } from 'vue-router' //引入組件 import Home from "./components/Home.vue" import News from "./components/News.vue" import NewsAdd from "./components/News/Add.vue" import NewsEdit from "./components/News/Edit.vue" import User from "./components/User.vue" //配置路由 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home, alias: '/home' }, { path: '/news', component: News, children: [ //子路由 { path: '', redirect:"/news/add"}, { path: 'add', component: NewsAdd }, { path: 'edit', component: NewsEdit }, ] }, { path: '/user', component: User }, ], }) export default router ~~~ #### 4、News.vue中掛載路由 ~~~ <template> <div class="content"> <div class="left"> <ul> <li><router-link to="/news/add">增加新聞</router-link></li> <li><router-link to="/news/edit">修改新聞</router-link></li> </ul> </div> <div class="right"> <router-view></router-view> </div> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ data() { return {}; }, }); </script> <style lang="scss"> .content { display: flex; padding: 20px; .left { width: 200px; border-right: 1px solid #ddd; min-height: 400px; } .right { flex: 1; } } </style> ~~~