vue3使用vue-router路由 懒加载和传参

在 Vue3 中使用 vue-router 路由，需要先安装 vue-router 包：

npm install vue-router

然后在 main.js 文件中引入 vue-router 并进行配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在 router.js 文件中定义路由规则：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./pages/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./pages/About.vue'),
    },
  ],
});

export default router;

以上代码定义了两个路由规则，分别为 / 和 /about。/ 路由对应的组件为 Home.vue，/about 路由对应的组件为 About.vue。

路由懒加载

在 Vue3 中，路由懒加载可以通过 lazyLoad 属性来实现。lazyLoad 属性接收一个函数，该函数会在路由被访问时执行，并返回组件实例。

以下是路由懒加载的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./pages/Home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./pages/About.vue'),
      lazyLoad: () => import('./pages/About.vue'),
    },
  ],
});

以上代码中，/about 路由的 lazyLoad 属性设置为一个函数，该函数会在路由被访问时执行，并返回 About.vue 组件实例。

路由传参

在 Vue3 中，路由传参可以通过 params 属性来实现。params 属性接收一个对象，该对象会在路由被访问时传递给组件。

以下是路由传参的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: () => import('./pages/User.vue'),
    },
  ],
});

以上代码中，/user/:id 路由的 params 属性设置为一个对象，该对象包含一个 id 属性。当路由被访问时，id 属性的值会传递给 User.vue 组件。

在 User.vue 组件中，可以通过 this.$route.params 属性获取路由参数：

<template>
  <div>
    用户 ID：{{ $route.params.id }}
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.params); // { id: 123 }
  },
};
</script>

以上代码会在组件 mounted 钩子函数中打印出路由参数。