网站数据库设置权限,模仿图库网站开发,wordpress多用户插件,wordpress简码插件Vue 2 和 Vue 3 在路由封装方面有一些区别#xff0c;主要体现在 Vue Router 版本的升级#xff08;Vue Router 3 - Vue Router 4#xff09;上。下面我们来对比一下 Vue 2 和 Vue 3 在路由封装上的主要区别#xff0c;并提供相应的代码示例。 1. Vue 2 路由封装#…Vue 2 和 Vue 3 在路由封装方面有一些区别主要体现在 Vue Router 版本的升级Vue Router 3 - Vue Router 4上。下面我们来对比一下 Vue 2 和 Vue 3 在路由封装上的主要区别并提供相应的代码示例。 1. Vue 2 路由封装基于 Vue Router 3
Vue 2 使用 Vue.use(VueRouter) 注册路由并且 new VueRouter({}) 创建路由实例。
安装 Vue Router 3
npm install vue-router3router/index.jsVue 2 版
import Vue from vue;
import VueRouter from vue-router;
import Home from /views/Home.vue;
import About from /views/About.vue;Vue.use(VueRouter);const routes [{path: /,name: Home,component: Home,},{path: /about,name: About,component: About,},
];const router new VueRouter({mode: history,base: process.env.BASE_URL,routes,
});export default router;main.jsVue 2 版
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);2. Vue 3 路由封装基于 Vue Router 4
Vue 3 需要使用 createRouter 和 createWebHistory 创建路由并且 app.use(router) 挂载。
安装 Vue Router 4
npm install vue-router4router/index.jsVue 3 版
import { createRouter, createWebHistory } from vue-router;
import Home from /views/Home.vue;
import About from /views/About.vue;const routes [{path: /,name: Home,component: Home,},{path: /about,name: About,component: About,},
];const router createRouter({history: createWebHistory(),routes,
});export default router;main.jsVue 3 版
import { createApp } from vue;
import App from ./App.vue;
import router from ./router;const app createApp(App);app.use(router); // 挂载路由
app.mount(#app);3. Vue 2 和 Vue 3 路由封装的主要区别
对比项Vue 2 (Vue Router 3)Vue 3 (Vue Router 4)路由注册Vue.use(VueRouter)createRouter() app.use(router)路由实例创建new VueRouter({})createRouter({})路由模式mode: history / mode: hashhistory: createWebHistory() / createWebHashHistory()router.beforeEach直接使用 router.beforeEach直接使用 router.beforeEachthis.$router组件内部可用组件内部可用this.$route组件内部可用组件内部可用router.push()this.$router.push(/about)this.$router.push(/about) 4. 路由守卫封装
Vue 2 全局前置守卫
router.beforeEach((to, from, next) {if (to.meta.requiresAuth !isAuthenticated()) {next(/login);} else {next();}
});Vue 3 全局前置守卫写法一致
router.beforeEach((to, from, next) {if (to.meta.requiresAuth !isAuthenticated()) {next(/login);} else {next();}
});5. 动态路由注册
Vue 2 添加动态路由
router.addRoutes([{path: /dynamic,name: Dynamic,component: () import(/views/Dynamic.vue),},
]);Vue 3 添加动态路由不同
router.addRoute({path: /dynamic,name: Dynamic,component: () import(/views/Dynamic.vue),
});6. 路由懒加载
Vue 2 和 Vue 3 的路由懒加载写法基本相同
const routes [{path: /,name: Home,component: () import(/views/Home.vue),},
];7. setup 中使用路由Vue 3 专属
Vue 3 组合式 API 使用 useRouter 和 useRoute 访问路由
import { useRouter, useRoute } from vue-router;
import { onMounted } from vue;export default {setup() {const router useRouter();const route useRoute();onMounted(() {console.log(当前路径, route.path);});const goToHome () {router.push(/);};return { goToHome };},
};8. 结论
Vue 3 需要使用 createRouter不再使用 Vue.use(VueRouter)。Vue 3 需要 app.use(router) 挂载而 Vue 2 在 new Vue({ router }) 中挂载。Vue 3 组合式 API 可以用 useRouter 和 useRoute 获取路由信息Vue 2 仍使用 this.$router 和 this.$route。addRoutes 改为 addRoute但功能类似。
总体来说Vue 3 使路由 API 变得更加模块化适配了 setup 语法但大多数核心概念和 Vue 2 保持一致。
你是要封装 Vue 3 版本的路由吗还是希望对 Vue 2 的封装进行优化
