您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:12-19来源:作者:点击数:

在 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 钩子函数中打印出路由参数。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门