basic

1.vue-router4 #

vue-router 在版本 4 中进行了一些重大的更改，以适应 Vue 3 的新特性和改进。以下是 vue-router 3 和 4 之间的主要区别：

创建和使用：
vue-router 3:
- 使用 new VueRouter() 创建一个路由实例。
- 使用 Vue.use(VueRouter) 安装路由插件。
vue-router 4:
- 使用 createRouter() 创建一个路由实例。
- 不再需要使用 Vue.use()。相反，你将路由实例传递给 Vue 应用的 use() 方法。
路由配置：
vue-router 3:
- mode: 'history' 用于启用 HTML5 历史模式。
vue-router 4:
- 使用 history: createWebHistory() 启用 HTML5 历史模式。
导航守卫：
vue-router 3:
- 使用 beforeEnter、beforeLeave 等钩子。
vue-router 4:
- 使用 beforeEnter、beforeLeave 等钩子，但它们的参数和调用方式有所不同，更加符合 Composition API 的风格。
路由记录：
vue-router 3:
- 路由记录是一个对象数组。
vue-router 4:
- 路由记录仍然是一个对象数组，但其结构和属性有所不同，例如，children 属性现在是 routes。
其他：
vue-router 4 为 Vue 3 的 Composition API 提供了更好的支持，例如 useRoute 和 useRouter。

2 vue-router #

2.1 main.ts #

src\main.ts

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

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

2.2 App.vue #

src\App.vue

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

<template>
  <h1>App</h1>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/users">User Management</router-link> |
    <router-link to="/profile">Personal Center</router-link>
  </nav>
  <router-view></router-view>
</template>

<style scoped>
</style>

2.3 router.ts #

src\router.ts

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import User from './components/User.vue';
import Profile from './components/Profile.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/users', component: User },
  { path: '/profile', component: Profile }
];

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

export default router;

2.4 Home.vue #

src\components\Home.vue

<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

2.5 User.vue #

src\components\User.vue

<template>
  <div>
    <h2>User</h2>
  </div>
</template>

2.6 Profile.vue #

src\components\Profile.vue

<template>
  <div>
    <h2>Profile</h2>
  </div>
</template>