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

news2024/11/25 13:51:13

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

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
  }
});