Vue3.0 路由的概念，

目录

了解什么是前端路由

1.什么是路由

2.回顾后端路由

3. SPA与前端路由

​编辑4. 什么是前端路由

​编辑

了解前端路由工作方式

5.前端路由的工作方式

---

 

路由有两种

• 后端路由
• 前端路由

路由的本质是对应关系

了解什么是前端路由

1.什么是路由

2.回顾后端路由

3. SPA与前端路由

4. 什么是前端路由

⚪ 井号开头的地址是哈希地址

⚪哈希地址切换，展示对应的组件

⚪前端路由会监听哈希地址 

了解前端路由工作方式

5.前端路由的工作方式

路由配置：

哈希地址+组件

前端路由监听用户点击了什么路由链接

根据这个链接匹配path路径，选组件

 Vue3.0-03.路由的概念 - 手动模拟实现简易的前端路由_哔哩哔哩_bilibili

 以下【购买】和【价格查询】，是超链接，附有哈希地址——#/地址

用户点击不同的路由地址，前端路由监听到

切换两个组件【购买】和【价格查询】，

通过created()生命周期函数，在组件中，监听匹配

实际开发用vue-router 

 

路由基础-什么是vue-router

1.什么是vue-router

2.vue-router的版本

 离谱

3.vue-router 4.x 的基本使用步骤

 

 

 3.1在项目中安装vue-router

只要指定@next

就是按照 4.x 版本的vue-router

 3.2定义路由组件

 

 3.3声明路由链接和占位符

 demo

router-view        会被渲染为a超链接

使用to属性 ，定义哈希地址

 router-view        路由的占位符

前端路由监听到用户点击的路由链接，在占位符这里替换组件

 不是还应该注册这三个组件到App.vue里吗？

---

 

 3.4创建路由模块

 demo

 demo