首页 / 脚本样式 / Vue / vue3中如何使用vue-router（步骤）

1、安装 vue-router

     npm i vue-router@4

2、新建router文件夹，里边放置index.js,引入,使用，配置，注册，导出

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [

  {

    path: "",

    name: "home",

    component: () => import("@/views/HomeView"),

    redirect: "/master",

    children: [

      {

        path: "/work",

        name: "Work",

        component: () =>

          import(/* webpackChunkName: "first" */ "@/views/WorkBench"),

        meta: { title: "工作台", icon: "icon-gongzuotai" },

      },

    ],

  },

];

const router = createRouter({

  history: createWebHashHistory(),

  routes,

});

export default router;

3、在main根上引入以上文件夹，并注册使用

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

createApp(App)

  .use(router)

  .mount("#app");