vue3安装vue-router

vue3安装vue-router

安装

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4

新建 router 文件夹

路径：/src/router

新建 index.ts 文件

路径：/src/router/index.ts

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

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import("../components/HomeView.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to, from) => {

  // 路由守卫逻辑


  // 通过 return turn;
  // 不通过 return false;
  return true;
});

export default router;

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from "./router";

const app = createApp(App);

app.use(router).mount('#app');

App.vue

在 setup 中访问路由和当前路由