对路由的理解: 在vue3中, 路由的定义主要通过Vue Router4 (专门为Vue3设计的版本) 来实现. 相比于Vue2, 他的核心逻辑虽然相似, 但在初始化方式和组合式API的支持上有显著变化.

路由配置文件:

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router

main.ts代码如下:

import router from './router/index'
app.use(router)

app.mount('#app')

App.vue代码如下:

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

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

两个注意点:
1. 路由组件通常存放在pages或者views文件夹, 一般组件通常存放在components文件夹.
2. 通过点击导航, 视觉效果上“消失”的路由组件, 默认是被卸载掉的, 需要的时候再去挂载.

路由器工作模式:
history模式:
优点: URL更加美观, 不带有#, 更加接近传统网站URL.
缺点: 后期项目上线, 需要服务端配合处理路径问题, 否则刷新会有404错误.¹

const router = createRouter({
	history:createWebHistory(), //history模式
	/******/
})

hash模式:
优点: 兼容性更好, 因为不需要服务端处理路径.
缺点: URL中带有#不太美观, 且存在SEO优化方面相对较差

const router = createRouter({
	history:createWebHashHistory(), //hash模式
	/******/
})

to的两种写法:

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>