vue動態(tài)路由匹配和路由懶加載多種方法詳解

更新時間：2023年06月13日 08:45:39 作者：C_心欲無痕

這篇文章主要介紹了vue動態(tài)路由匹配和路由懶加載,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1，動態(tài)路由匹配

前言：

在日常開發(fā)中，有一個商品列表頁面，點擊每一項可以看到詳情頁面，且樣式都是一樣的，那樣我們可以封裝一個詳情頁面，路由為/detail 不同的數(shù)據(jù) id或唯一標識可以路由寫成 /detail/id，這樣獲取id值就可以請求不同的數(shù)據(jù)并展示了；

所以這種場景使用動態(tài)路由匹配是比較方便的；

動態(tài)路由匹配模式

你可以在同一個路由中設置有多個路徑參數(shù)，它們會映射到 $route.params 上的相應字段。例如

匹配模式	匹配路徑	$route.params
/users/:username	/users/Eula	`{ username: 'Eula' }`
/users/:username/age/:18	/users/Eula/age/18	`{ username: 'Eula', postId: '18' }`

上面 username對應的是Eula(尤菈) ；age對應的是18；

定義：

首先在路由列表定義一個動態(tài)路由，主要表現(xiàn)為 /:id 動態(tài)字段以冒號開頭；

// 這是動態(tài)路由 加上：/:id
      {
        path: '/detail/:id',
        name: 'Detail',
        meta: { title: '詳情頁面' },
        component: () => import('../views/routers/detail.vue'),
      },

使用：

在需要進行跳轉的地方直接在path后面添加參數(shù)即可，如下：

 this.$router.replace({path:'/detail/001'})

獲?。?/h3>
獲取傳過來的參數(shù)主要有以下幾種方式：

第一種

 created() {
    // 第一種：這里能夠獲取動態(tài)路由的傳參
    console.log('第一種獲取方式：', this.$route.params); 
  },

打印結果：{id: ‘001’}

第二種

使用watch監(jiān)聽路由的變化；

// 第二種：監(jiān)聽路由
  watch: {
    $route: {
      immediate: true,
      handler(newV, oldV) {
        console.log('第二種獲取方式：', newV.params); //{id: '001'}
      },
    },
  },

第三種

使用路由鉤子函數(shù)beforeRouteEnter 的to參數(shù)也能拿到id值；但想要獲取this需要使用vm;

  beforeRouteEnter(to, from, next) {
    if (to.params.id) {
      console.log('第三種獲取方式：', to.params);
      next((vm) => {
        // 通過 `vm` 訪問組件實例 相當于this
        // 此處可以請求數(shù)據(jù)
      });
    } else {
      next();
    }
  },

2，路由懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就會更加高效。

Vue Router 支持開箱即用的動態(tài)導入，這意味著你可以用動態(tài)導入代替靜態(tài)導入：

其實就是寫成 箭頭函數(shù)的形式：

// 將
// import UserDetails from './views/UserDetails.vue'
// 替換成
const UserDetails = () => import('./views/UserDetails.vue')

還可以把組件按組分塊進行打包在一起

使用 webpack有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)：

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

到此這篇關于vue動態(tài)路由匹配和路由懶加載的文章就介紹到這了,更多相關vue動態(tài)路由路由懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: