vue2 ---- 路由

1.概念

Vue中路由：路径 和 组件 的 映射 关系

2.工具---VueRouter

VueRouter 的 使用 (5 + 2)

5个基础步骤 (固定)

2 个核心步骤

main.js的完整写法

组件存放目录问题 (组件分类)

3.路由进阶

路由的封装抽离

目标：将路由模块抽离出来。 好处：拆分模块，利于维护

声明式导航

全局组件 router-link

• 导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)

① 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #

② 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

自动提供类名

设置高亮样式

• 两个高亮类名（默认添加）

两个类的区别

切换类名

• 跳转传参

目标：在跳转路由时, 进行传值

1. 查询参数传参

① 语法格式如下

to="/path?参数名=值"

② 对应页面组件接收传递过来的值

$route.query.参数名

2. 动态路由传参

① 配置动态路由

② 配置导航链接

to="/path/参数值"

③ 对应页面组件接收传递过来的值

$route.params.参数名

3.两种方式传参的区别

4.动态路由参数可选符

路由重定向

Vue路由 - 404

Vue路由 - 模式设置

编程式导航

基本跳转

问题：点击按钮跳转如何实现？

编程式导航：用JS代码来进行跳转

两种语法:

① path 路径跳转

② name 命名路由跳转

路由传参

① path 路径跳转传参

• query传参

获取参选参数

• 动态路由传参

获取参数

② name 命名路由跳转传参

•  query传参

• 动态路由传参