路由

安装

npm i vue-router 
npm i @types/vue-router  # TypeScript 类型定义

配置

在 src/router/index.ts 中配置路由：

import {createRouter, createWebHistory} from 'vue-router';
import APP from '@/App.vue';
import HomePage from "@/components/HomePage.vue";
import MessageContainer from "@/components/Message/MessageContainer.vue";

const router = createRouter(
	{
		history: createWebHistory(),  // 使用 HTML5 history 模式
		routes: [
			{
				path: '/',   // 路由路径
				component: APP   // 路由组件
			},
			{
				path: '/home',
				component: HomePage
			},
			{
				path: '/message',
				component: MessageContainer
			}
		]
	}
)

export default router;

使用

在 src/main.ts 中使用路由：

import router from '@/router';
app.use(router);

在组件中使用路由，通过 vue-router 模块提供的 RouterLink 组件来实现路由跳转，使用 RouterView 组件来渲染当前路由对应的组件：

<template>
  <div class="nav">
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/message">Message</RouterLink>
  </div>
  
  <div class="content">
    <RouterView />   <!--    渲染当前路由对应的组件,，组件会被放到这 -->
  </div>
</template>

<script lang="ts" setup>
import {RouterView, RouterLink} from "vue-router";
</script>

TIP

• RouterLink 组件会被编译成a便签，可以使用 active-class 属性来设置激活状态的类名，如
  
  <RouterLink to="/message" active-class="active-link">Message</RouterLink>
  
  
• RouterView 是一个占位符，当前路由匹配时，会自动渲染对应的组件。