Vue3入门（7）
下面开始介绍路由
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>