vue | 您所在的位置:网站首页 › vue动态换肤 › vue |
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 |
CopyRight 2018-2019 实验室设备网 版权所有 |