Web1020/13.Vue3/路由.md

路由

1.安装

v2=> npm install vue-router@3 v3 => npm install vue-router(vue-router@4)

2.创建路由文件

router => index.ts(js)

3.将文件挂载到跟页面上

main.ts页面 引入：import router from './router' 使用:use(router)

4.配置路由页面

1.在views文件夹内穿件页面 2.在路由也配置： a.引入路由创建方法：createHistory

5.使用：RouterLink 占位

to:path/name

6.路由重定向

7.二级路由/多级

8.query传参

9.params传参

10.接收参数

11.params与query区别

1.接收参数字段不同 2.动态跳转时 对象写法 params只能使用name跳转 query则都可以

12.路由模式

hash和history 区别： hash： 1.有#号 2.不需要服务器配置url路径 3.刷新会不有404 4.适合后台管理相关的系统页面

history: 1.没有#号 2.需要服务器配置url路径 3.刷新会有404 4.更适合toC端

13.了解nanoid 随机生成

https://blog.csdn.net/weixin_45705239/article/details/139766630

14.scss:npm install sass

15.路由传参配置

16.路由跳转

声明式导航： 编程式导航:useRouter

17.router 和 route 区别

useRoute() => route useRouter() => router

18.replace与push区别

19.路由懒加载

20.keep-alive

内置组件 => 组件缓存 提高性能减少不必要的组件销毁与重建 有两个生命周期 onActivated:组件激活时重新加载数据使用 onDeactivated:组件激活时清理数据资源使用