Vue dynamic route matching and route lazy loading

1. Dynamic route matching

Foreword:

In daily development, there is a product list page, click on each item to see the detail page, and the style is the same, so we can encapsulate a detail page, the route is different data id or unique identifier can be written as a route /detail, /detail/idso Get the id value to request different data and display it;

Therefore, it is more convenient to use dynamic route matching in this scenario;

Dynamic route matching mode

You can have multiple route parameters in the same route, and they will map to the corresponding fields on $route.params. For example

match pattern	match path	$route.params
/users/:username	/users/Eula	{ username: 'Eula' }
/users/:username/age/:18	/users/Eula/age/18	{ username: 'Eula', postId: '18' }

The above username corresponds to Eula (尤拉); age corresponds to 18;

definition:

First define a dynamic route in the route list, mainly manifested in the /:iddynamic field 冒号starting with;

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

use:

Add parameters directly after the path where you need to jump, as follows:

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

Obtain:

There are mainly the following ways to obtain the passed parameters:

The first

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

Print result: {id: '001'}

the second

Use watch to monitor routing changes;

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

third

You can also get the id value by using the to parameter of the routing hook function beforeRouteEnter; but you need to use vm to get this;

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

2. Route lazy loading

When building apps in packages, JavaScript bundles can become very large, affecting page load. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, it will be more efficient.

Vue Router supports dynamic imports out of the box, which means you can replace static imports with dynamic imports:

In fact, it is written 箭头函数in the form:

// 将
// import UserDetails from './views/UserDetails.vue'
// 替换成
const UserDetails = () => import('./views/UserDetails.vue')

Components can also be packaged together in group blocks

Using webpack sometimes we want to package all components under a certain route in the same asynchronous chunk (chunk). Just use 命名 chunk, a special annotation syntax to provide chunk name(requires 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 will combine any async module with the same chunk name into the same async chunk.

---