I won’t go into too much detail about the installation and introduction of routing and registration, but just talk about the differences and how to jump to the page
Vue2 routing jump and passing parameters
Vue2 only needs to create the router folder and index.js, configure our routing, and import it in main.js
import router from "@/router"; // vue路由
app.use(router)
Then call the routing jump in the page
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 routing jump and passing parameters
Also need to create router folder and index.js, configure our routing, import in 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");
Then call the routing jump in the page
import router from '@/router/index.js'
router.push('/login')
router.push({
name: 'Login',
query: {
a: 123
}
});
router.push({
path: '/login',
query: {
a: 123
}
});
Well, the specific difference is that there is no this point in vue3. We need to refer to the router to the page that needs to call router.push to call and jump successfully. Is learning waste?
