Vue3项目使用Vue-router4（对比vue2配合Vue-router3）

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
  path: '/',
  name: '首页',
  component: () =>
    import( /* webpackChunkName: "page" */ '@/views/index'),
  meta: {
    requireAuth: true,
  },
  children: [{
    path: '/index',
    name: '首页',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/views/wel'),
    meta: {
      requireAuth: true,
    }
  }]
}]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

import { createRouter, createWebHistory } from "vue-router";
import login from "../views/login.vue";
import index from "../views/index.vue";
const routes = [
  {
    path: "/login",
    name: "登录",
    component: login,
    meta: {
      requireAuth: false,
    },
  }, {
    path: "/",
    name: "首页",
    component: index,
    meta: {
      requireAuth: true,
    },
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
export default router;

this.$router.push({
  path: "/index"
});

import { useRoute, useRouter } from "vue-router";
export default {
  setup(props, context) {
    // 获取路由器实例
    const router = useRouter();
    // route是响应式对象,可监控器变化
    const route = useRoute();
    const onSubmit = e => {
      e.preventDefault();
      validate()
        .then(() => {
          login(state.login).then(res => {
            if (res.code == 0) {
              router.push("/");
            }
          });
        })
        .catch(err => {});
    };
  }
};