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

<script setup lang="ts">
</script>

<template>
  <router-view />
</template>

<style>
</style>

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

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

router.push({
  name: "hello",
  query: {
    ...route.query,
  },
});
</script>

<template>
  <h1>hello</h1>
</template>

<style scoped>
</style>