路由 vue-router

路由是一种映射关系           Vue中的路由是路径和组件的映射关系  

前端路由的作用：实现业务场景的切换

单页面应用（SPA）：所有的业务都在一个页面编写，只有一个html，依赖路由切换显示

        好处：开发效率高，用户体验好

        坏处：开发成本高。首次加载会比较慢

src/views -------- 页面组件 ------ 页面展示 ------- 配合路由、切换页面

src/components --------- 复用组件 ------- 展示数据 -------- 用于复用、重复渲染结构一样的标签

vue-router 的基础使用

1、下载 vue-router ----------- yarn add vue-router@3.5.2

2、在 mian.js 中引入 

3、注册全局组件

4、规则数组

5、生成路由对象

6、路由对象注入到 vue 实例中，this可以访问 $route 和 $router

7、在App.vue 中设置挂载点，当 url 的hash值路径切换，显示规则里对应的组件到这

 

声明式导航 ------- 高亮

router-link 是 VueRouter 在全局注册的组件，本质就是a标签

使用：

        1、router-link代替a标签

        2、to属性代替href属性

        3、对激活的类名做样式编写

好处：router-link 自带激活时的类名，可以做高亮

声明式导航 ------- 传值

方式1：

• to="/path?参数名=值"
• 接收：$route.query.参数名

方式2：

• 路由规则path上定义 /path/：参数名
• to="/path/值"
• 接收：$route.params.参数名