VueRouter路由进阶教程（Vue2）

一、路由的抽装分离

        在src目录下新创建一个名为router的文件夹，在该文件夹下创建一个名为index.js的文件，用于封装路由代码

将该文件与原来的存放路由代码的文件（main.js）绑定

注意：当把main文件中的路由代码抽离到router中index文件中时，路由路径发生改变，需更改路径，后面会讲到绝对路径解决这个问题

---

二、声明式导航链接（实现导航高亮效果）

        vue-router提供了一个全局组件router-link(取代a标签)，该组件和a标签一样能跳转，同时支持默认提供高亮样式，同时可以直接设置高亮样式

不同点：href→to，链接中无需加#

更换之后，可以在App.vue文件的样式中更改高亮样式

补充：router-link总共提供了两个类名，一个为上图中的router-link-active,

另一个为router-link-exact-active,从英文翻译中可以看出第一个为模糊匹配，第二个为精确匹配

模糊匹配：可以匹配路径:  /x/任意

精确匹配：只能匹配 /x 路径

如果觉得这两个类名太长了很麻烦，可以在配置路由规则里自定义类名

---

三、跳转路由时传参

1.查询参数传参

在路由链接后添加？自定义参数名1=想传入的参数1&自定义参数名2=想传入的参数2

在想要传入参数的地方更改成{{ $route.query.key }}(key为自定义名不统一)

注：在js语法中需在$route前加this.

2.动态路由传参

配置动态路由：在路由规则中的path路径后配置/:name（name为自定义名不统一）

配置导航链接：在导航链接后添加/想传入的参数值

用$route.params.name接受参数值

问题:配了路由 path:"/search/:words”为什么按下面步骤操作，会未匹配到组件，显示空白?

原因: /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?

3.两种传参方式的区别

查询参数传参适合传入多个参数，动态路由传参适合传入单个参数，更方便

---

四、路由的重定向

作用：匹配指定path路径后，强制跳转另一条指定路径，常用于网页打开时自动跳转默认页面

语法：{path:匹配路径,redirect:重定向到的路径}

---

五、路由-404

作用：当路径找不到匹配时，返回提示页面

语法：{ path: '*', component: NotFound }，（需新建一个组件）

位置：routes最后

效果：

---

六、模式设置

问题:路由的路径看起来不自然,有#，能否切成真正路径形式?

hash路由(默认)例如:http://localhost:8080/#/home

history路由(常用)例如:http://localhost:8080/home(以后上线需要服务器端支持)

设置成history路由语法：

---

七、編程式导航-点击按钮跳转

用处：点击按钮实现跳转，例如点击搜索按钮跳转另一个页面

1.path路径跳转（简易方便）

语法：

操作步骤：

给按钮绑定点击事件

在该文件下方script里注册点击方法

注：这段代码写在js中，所以需在$router前加this.

2.用name自命名方式跳转（适用于路径复杂时使用）

先在配置的路由规则中找到所需要跳转的路由路径，用name方式命名

然后在script中用name方式注册方法

3.跳转时传参

查询传参

当参数为多个时可采用对象模式

该代码中的inpValue为输入框中的值，需自己绑定，name方式传参同理

动态路由传参