vue动态路由匹配和路由懒加载多种方法详解

更新时间：2023年06月13日 08:45:39 作者：C_心欲无痕

这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1，动态路由匹配

前言：

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

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

动态路由匹配模式

你可以在同一个路由中设置有多个路径参数，它们会映射到 $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；

定义：

首先在路由列表定义一个动态路由，主要表现为 /: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 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

到此这篇关于vue动态路由匹配和路由懒加载的文章就介绍到这了,更多相关vue动态路由路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue插槽具体用法及实例分析
本文主要介绍了Vue框架中插槽的使用方法和应用场景。通过具体实例分析，详细讲解了插槽的具体用法，帮助读者深入理解Vue中插槽的使用和实现方式
2023-05-05
关于配置babel-plugin-import报错的坑及解决
这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue3一个元素如何绑定两个或多个事件
这篇文章主要介绍了vue3一个元素如何绑定两个或多个事件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue进入页面时滚动条始终在底部代码实例
这篇文章主要介绍了vue进入页面时滚动条始终在底部，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue实现表单未编辑或未保存离开弹窗提示功能
这篇文章主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
Vue中slot插槽作用与原理详解
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
2022-09-09
vue中怎么区分不同的环境
这篇文章主要介绍了vue中怎么区分不同的环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue页面使用阿里oss上传功能的实例（一）
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例（一），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue elementUI实现自定义正则规则验证
本文主要介绍了vue elementUI实现自定义正则规则验证，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue中js判断长时间不操作界面自动退出登录(推荐)
这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01