【Vue】路由 - 基础使用方法

微信订阅号：Rabbit_svip

在前端实现路由跳转的网站，也叫单页面网站。

要实现单页面网站，其实是需要前后端配合的。在服务器端，不管url请求哪个页面，都统统返回指定页（通常是index.html）。

在前端实现路由跳转能很大程度上减轻服务器压力，也能提高项目的性能。

最明显的就是用户在填写表单，如果不小心点错了别的按钮，跳转到别的页面，当用户返回表单页时，刚刚填写过的信息又要重新填写一遍。如果想要实时临时保存用户填写的信息，在后端处理会有点麻烦，而且需要消耗网络资源。

如果在前端实现路由跳转，这个问题将非常容易解决。

以上是前端路由的部分有点。

---

本节关键字

• <router-link>
• <router-view>

代码如下

这段代码已事先现引入 vue.js 和 vue-router.js

微信订阅号：Rabbit_svip 微信订阅号：Rabbit_svip

仔细观察 URL，是有切换的，但URL旁边的刷新按钮是没变化的。

这就是前端路由与后端路由的一个区别。

路由的操作可以理解为不断切换要显示的组件。

路由部分，先定义一个数组，用来存放路由信息的。

微信订阅号：Rabbit_svip

上面代码用“routes”来存放。

• path 代表URL上路劲
• component 代表对应的组件

微信订阅号：Rabbit_svip

VurRouter是vue-router.js暴露出来的一个构造器。

里面放设置好的路由参数即可。

微信订阅号：Rabbit_svip

在HTML部分

• <router-link> 代表路由的链接（默认是a标签）
• to 代表要去的路由地址
• tag 里面可以指定这个路由链接是什么html标签（默认是a标签）
• <router-view>就是用来展示组件内容的容器。