1.路由概述

当页面只有一个html文件时候,切换不同的内容时候就靠路由器router

路由器可以根据路由(route)规则管理路径和跳转不同的呈现内容

路由器的基本设置思路如下

2.路由应用案例

(1)在app组件中搭建基本结构

内容部分是需要切换的路由

(2)请路由器-路由器设置

安装路由器,引入路由器,设置路由对应关系

设置完毕路由规则之后,引入工作模式,防止报错

最后,将设置好的路由器暴露出去

(2)在main.ts中使用路由器

这时候,vue工具里就会有存在路由的提示

(3)App组件里放置路由器

要在放置的位置引入RouterView标签,

点击跳转的按钮放置RouterLink标签,to表示路径

点击后按钮样式设置active-class属性

3.路由的三个注意点

(1)路由的组件一般放在pages/views文件夹下,一般组件放在components文件夹

(2)页面上消失的组件是被卸载了

(3)最好给路由规则配置一个/默认路径,不然会报错

4.路由两种模式

(1)history模式

vue3-history:createWebHistory()

不用加#,更加美观

需要后端配置路径

一般toc项目用

(2)hash模式

vue3-history:createWebHashHistory()

要加#不美观

SEO搜索差

不需要后端配置路径,兼容性高

一般后台项目用

5.嵌套路由

当路由下面还有子路由就有嵌套路由

(1)配置嵌套路由的规则,写在路由下面children的数组

(2)使用to的时候要写一条完整的路径