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