vue3路由跳转以及传参。和vue2路由跳转传参的区别

路由的安装和引入以及注册就不过多赘述，直接说区别和怎么跳转页面

vue2路由跳转以及传递参数

vue2只需要创建好router文件夹和index.js，配置好我们的路由，在main.js引入

import router from "@/router"; // vue路由app.use(router)

然后在页面中调用路由跳转

this.$router.push('/login');this.$router.push({name: 'Login',query: {a: this.$route.query.a,purStep: obj.menuKey,key: "page" + new Date().getDate()}
});this.$router.push({path: '/login',query: {a: this.$route.query.a,purStep: obj.menuKey,key: "page" + new Date().getDate()}
});

vue3路由跳转以及传递参数

同样需要创建好router文件夹和index.js，配置好我们的路由，在main.js引入

// router文件
import { createRouter, createWebHistory,createWebHashHistory } from "vue-router";const router = createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "Login",component: () => import("@/views/login/Login.vue"),},// 后台首页{path: "/home",name: "Home",component: () => import("@/layout/Index.vue"),children: [{path: "/type",name: "Type",component: () => import("@/views/qrCode/type.vue"),},{path: "/video",name: "Video",component: () => import("@/views/qrCode/video.vue"),}],},],
});export default router;

import router from '@/router'new Vue({router,store,render: h => h(App)
}).$mount("#app");

然后在页面中调用路由跳转

import router from '@/router/index.js'router.push('/login')router.push({name: 'Login',query: {a: 123}
});router.push({path: '/login',query: {a: 123}
});