vue - vue动态路由匹配和路由懒加载

Posted 2023-04-02 C_心欲无痕

1，动态路由匹配

前言：

在日常开发中，有一个商品列表页面，点击每一项可以看到详情页面，且样式都是一样的，那样我们可以封装一个详情页面，路由为/detail 不同的数据 id或唯一标识可以路由写成 /detail/id，这样获取id值就可以请求不同的数据并展示了；

所以这种场景使用动态路由匹配是比较方便的；

动态路由匹配模式

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如

匹配模式	匹配路径	$route.params
/users/:username	/users/Eula	username: 'Eula'
/users/:username/age/:18	/users/Eula/age/123	username: 'Eula', postId: '18'

上面 username对应的是Eula(尤菈) ；age对应的是18；

定义：

首先在路由列表定义一个动态路由，主要表现为 /:id 动态字段以冒号开头；

	// 这是动态路由 加上：/:id
      
        path: '/detail/:id',
        name: 'Detail',
        meta:  title: '详情页面' ,
        component: () => import('../views/routers/detail.vue'),
      ,

使用：

在需要进行跳转的地方直接在path后面添加参数即可，如下：

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

获取：

获取传过来的参数主要有以下几种方式：

第一种

 created() 
    // 第一种：这里能够获取动态路由的传参
    console.log('第一种获取方式：', this.$route.params); 
  ,

打印结果 ：id: ‘001’

第二种

使用watch监听 路由的变化；

// 第二种：监听路由
  watch: 
    $route: 
      immediate: true,
      handler(newV, oldV) 
        console.log('第二种获取方式：', newV.params); //id: '001'
      ,
    ,
  ,

第三种

使用路由钩子函数beforeRouteEnter 的to参数也能拿到id值；但想要获取this需要使用vm;

  beforeRouteEnter(to, from, next) 
    if (to.params.id) 
      console.log('第三种获取方式：', to.params);
      next((vm) => 
        // 通过 `vm` 访问组件实例 相当于this
        // 此处可以请求数据
      );
     else 
      next();
    
  ,

2，路由懒加载

当打包构建应用时，javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

其实就是写成 箭头函数的形式：

// 将
// 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 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

---

参考链接：
路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
路由的匹配语法：https://router.vuejs.org/zh/guide/essentials/route-matching-syntax.html

VUE的路由懒加载及组件懒加载

一，为什么要使用路由懒加载

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题

二，懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载

三，常用的懒加载方式有两种：即使用vue异步组件 和 ES6中的import

1、未用懒加载，vue中路由代码如下

 1                 import Vue from ‘vue‘
 2                 import Router from ‘vue-router‘
 3                 import HelloWorld from ‘@/components/HelloWorld‘
 4 
 5                 Vue.use(Router)
 6 
 7                 export default new Router({
 8                   routes: [
 9                     {
10                       path: ‘/‘,
11                       name: ‘HelloWorld‘,
12                       component:HelloWorld
13                     }
14                   ]
15                 })
16                    

2、vue异步组件实现懒加载

　　　　方法如下：component：resolve=>(require([‘需要加载的路由的地址‘])，resolve)

 1 import Vue from ‘vue‘
 2 import Router from ‘vue-router‘
 3 　　/* 此处省去之前导入的HelloWorld模块 */
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   routes: [
 8     {
 9       path: ‘/‘,
10       name: ‘HelloWorld‘,
11       component: resolve=>(require(["@/components/HelloWorld"],resolve))
12     }
13   ]
14 })

3、ES 提出的import方法，（------最常用------）

　　　　方法如下：const HelloWorld = （）=>import(‘需要加载的模块地址‘)

　　　　（不加 { } ，表示直接return）

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component:HelloWorld
    }
  ]
})

 

 

四、组件懒加载

 相同与路由懒加载，

1、基础组件中写法

 1 <template>
 2   <div class="hello">
 3   <One-com></One-com>
 4   1111
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import One from ‘./one‘
10 export default {
11   components:{
12     "One-com":One
13   },
14   data () {
15     return {
16       msg: ‘Welcome to Your Vue.js App‘
17     }
18   }
19 }
20 </script>

2、const方法，ES 提出的import方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>

3、异步方法

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
export default {
  components:{
    "One-com":resolve=>([‘./one‘],resolve)
  },
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  }
}
</script>