在前端实现路由跳转的网站,也叫单页面网站。
要实现单页面网站,其实是需要前后端配合的。在服务器端,不管url请求哪个页面,都统统返回指定页(通常是index.html)。
在前端实现路由跳转能很大程度上减轻服务器压力,也能提高项目的性能。
最明显的就是用户在填写表单,如果不小心点错了别的按钮,跳转到别的页面,当用户返回表单页时,刚刚填写过的信息又要重新填写一遍。如果想要实时临时保存用户填写的信息,在后端处理会有点麻烦,而且需要消耗网络资源。
如果在前端实现路由跳转,这个问题将非常容易解决。
以上是前端路由的部分有点。
本节关键字
- <router-link>
- <router-view>
代码如下
这段代码已事先现引入 vue.js 和 vue-router.js
仔细观察 URL,是有切换的,但URL旁边的刷新按钮是没变化的。
这就是前端路由与后端路由的一个区别。
路由的操作可以理解为不断切换要显示的组件。
路由部分,先定义一个数组,用来存放路由信息的。
上面代码用“routes”来存放。
- path 代表URL上路劲
- component 代表对应的组件
VurRouter是vue-router.js暴露出来的一个构造器。
里面放设置好的路由参数即可。
在HTML部分
- <router-link> 代表路由的链接(默认是a标签)
- to 代表要去的路由地址
- tag 里面可以指定这个路由链接是什么html标签(默认是a标签)
- <router-view>就是用来展示组件内容的容器。
网友评论