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

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

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

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

前言：

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

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

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

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

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

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

定義：

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

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

使用：

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

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

獲取：

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

第一種

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

打印結(jié)果：{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` 訪問組件實(shí)例 相當(dāng)于this
        // 此處可以請求數(shù)據(jù)
      });
    } else {
      next();
    }
  },

2，路由懶加載

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

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

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

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

還可以把組件按組分塊進(jìn)行打包在一起

使用 webpack有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用命名 chunk，一個(gè)特殊的注釋語法來提供 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 會將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中。

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

您可能感興趣的文章: