>[success] # 路由重定向 1. **路由重定向**，將指定連接重定向分發給給其他連接，常見的場景一半在路由訪問時候我們一般會定義一個首頁路由例如`/home`，但大多數情況希望用戶輸入'/' 時候也可以匹配進入`/home` 首頁，可以采用形式 ~~~ [ { path: "/", name: "home", component: HomeView, }, { path: "/home", name: "home1", component: HomeView, }], ~~~ 這么寫過于復雜可以采用**路由重定向**形式,但和上面不同是當訪問`/` 路徑時候瀏覽器url 實際最后會顯示為`/home` ~~~ [ { path: "/", redirect: "/home", }, { path: "/home", name: "home1", component: HomeView, }, ] ~~~ * 也可以采用命名路由指定重定向位置 ~~~ const routes = [{ path: '/home', redirect: { name: 'homepage' } }] ~~~ >[danger] ##### 嵌套路由重定向 1. 在寫`redirect`的時候，可以省略`component`配置，因為它從來沒有被直接訪問過，所以沒有組件要渲染。唯一的例外是[嵌套路由](https://router.vuejs.org/zh/guide/essentials/nested-routes.html) 2. 嵌套路由為什么要使用重定向 定位到子路由，之前嵌套路由提過可以單獨訪問父級路徑并且也會展示，但大部分情況是想展示的更多是包含子路由的組件，就可以呃使用重定向 ~~~ { path: '/about', name: 'About', component: LAYOUT, redirect: '/about/index', meta: { hideChildrenInMenu: true, icon: 'simple-icons:about-dot-me', title: t('routes.dashboard.about'), orderNo: 100000, }, children: [ { path: 'index', name: 'AboutPage', component: () => import('/@/views/sys/about/index.vue'), meta: { title: t('routes.dashboard.about'), icon: 'simple-icons:about-dot-me', hideMenu: true, }, }, ], }; ~~~ >[danger] ##### 重定向和路由守衛 在路由重定向的時候路由守衛只會觸發最后實際訪問的路由，也就是說以最終實際訪問的為準 >[danger] ##### 重定向可以是用方法 1. 重定向到相對位置 ~~~ const routes = [ { // 將總是把/users/123/posts重定向到/users/123/profile。 path: '/users/:id/posts', redirect: to => { // 該函數接收目標路由作為參數 // 相對位置不以`/`開頭 // 或 { path: 'profile'} return 'profile' }, }, ] ~~~ >[success] # 路由別名 1. `alias` 用來設置路由別名，和重定向不同，當設置重定向時候你最后輸入的路徑都會變為重定向的目標路由，例如將'/' 重定向到了'/home' 你輸入 '/' 在瀏覽器地址欄最后顯示為'/home' ,路由別名就是顧名思義就是兩種路由訪問都可以進入同一個頁面 ~~~ { path: "/home", alias: "/", name: "home1", component: HomeView, }, ~~~ 訪問'/' 和 '/home' 都可以訪問到`HomeView` 2. 數組形式可以為一個路由設置多個別名 3. 可以給嵌套路由設置和上級一樣的別名，來達到訪問時候可以直接進入子路由，下面案例中`/about` 、`/about/home`、`/about/list` 、`/aa` 路徑訪問效果都等同 `/about/home`，也可以利用別的解決嵌套路由重定向問題，**注意** 如果別名路徑中前綴是`/`以使嵌套路徑中的路徑成為絕對路徑 ~~~ { path: "/about", name: "about", component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), children: [ { path: "home", alias: ["/about", "list",'/aa'], component: () => import(/* webpackChunkName: "about" */ "../views/HomeView.vue"), }, ], }, ~~~ * 其他案例一 ~~~ const routes = [ { path: '/users', component: UsersLayout, children: [ // 為這 3 個 URL 呈現 UserList // - /users // - /users/list // - /people { path: '', component: UserList, alias: ['/people', 'list'] }, ], }, ] ~~~ * 其他案例二，如果你的路由有參數，請確保在任何絕對別名中包含它們，也可像下面案例中將別名設置空這樣 `/users/:id/ 空` 就指向了`UserDetails ` ~~~ { path: '/users/:id', component: UsersByIdLayout, children: [ // 為這 3 個 URL 呈現 UserDetails // - /users/24 // - /users/24/profile // - /24 { path: 'profile', component: UserDetails, alias: ['/:id', ''] }, ], }, ~~~