vue动态路由匹配和路由懒加载多种方法详解
作者：C_心欲无痕
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动态路由路由懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！