Vue Router路由重定向與別名如何設置

本篇內容介紹了“Vue Router路由重定向與別名如何設置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

重定向

舉例說明：重定向是指當用戶訪問 /home 時，URL 會被 / 替換，然后匹配成 /。

重定向也是通過 routes 配置來完成，下面例子是從 /home 重定向到 /：

const routes = [{ path: '/home', redirect: '/' }]

重定向的目標也可以是一個命名的路由：

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

也可以是一個方法，動態返回重定向目標：

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目標路由作為參數
      // return 重定向的字符串路徑/路徑對象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },]

別名

將 / 別名為 /home，意味著當用戶訪問 /home 時，URL 仍然是 /home，但會被匹配為用戶正在訪問 /。

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

通過別名，可以自由地將 UI 結構映射到一個任意的 URL，而不受配置的嵌套結構的限制。使別名以 / 開頭，以使嵌套路徑中的路徑成為絕對路徑。甚至可以將兩者結合起來，用一個數組提供多個別名：

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // 為這 3 個 URL 呈現 UserList
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },]

/people 是絕對路徑的寫法，即可以直接通過 /people 來訪問。
list 是相對路徑的寫法，即url會拼接父級的路徑 → /users/list。

注意：如果路由有參數，請確保在任何絕對別名中包含它們：

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 為這 3 個 URL 呈現 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },]

“Vue Router路由重定向與別名如何設置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！