[vue-router4進階] 2.重定向和別名

重定向

重定向通過redirect屬性來定義,頁面會跳到redirect指定的路由
比如,我們定義一個根路由‘/’,讓它重定向到‘/index’:

  {
    path: '/',
    redirect: '/index',
  },

就是這樣,很簡單,在瀏覽器輸入http://localhost:8081/
路由會自動重定向到http://localhost:8081/index, 并且顯示首頁的內容

redirect還可以是一個方法,這樣重定向會更加靈活,在某些時候很有用:

  {
    path: '/list',
    redirect: to=>{ // redirect是一個方法,返回要重定向的目標
      // 這里可以進行一些判斷,決定重定向到哪個頁面
      return {path:'/index'} // 比如重定向到首頁
    },
  },

別名

我們可以給‘/index’頁面定義一個別名‘/home’:

  {
    path: '/index',
    alias: '/home', // 新增
    component: () => import('./views/index'),
    name: 'index',
    meta: {
      title: '首頁',
      keepAlive: true,
      transition: 'slide-left',
    },
  },

這樣,在訪問http://localhost:8081/home,顯示的也是index頁面,和重定向的區別就是,這是頁面的路由是不變的,還是/home
別名還有別的更高級的用法,我覺著沒什么用,就不介紹了,有興趣的小伙伴去官網看吧。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容