下面开始介绍路由
1. 【对路由的理解】
2 【基本切换效果】
- `Vue3`中要使用`vue-router`的最新版本，目前是`4`版本。
- 路由配置文件代码如下：
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>3. 【两个注意点】
第一. 路由组件通常存放在`pages` 或 `views`文件夹，一般组件通常存放在`components`文件夹。
第二. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被**卸载**掉的，需要的时候再去**挂载**。
4.【路由器工作模式】
第一. `history`模式
优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。
const router = createRouter({
history:createWebHistory(), //history模式
/******/
})
第二 `hash`模式
> 优点：兼容性更好，因为不需要服务器端处理路径。
> 缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。
const router = createRouter({history:createWebHashHistory(), //hash模式/******/})5. 【to的两种写法】
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>
6. 【命名路由】
作用：可以简化路由跳转及传参（后面就讲）。
给路由规则命名：
routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}]跳转路由：
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>
<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>
