前言

本章是为了以后实现前端页面的搭建而写的，

重点在于如何实现 单页Web应用

因为相对于以前的传统多页面web，有很大的缺陷。

那么就必须了解一下Vue的路由设置。

SPA的概念

总的而言，我们知道之前的话都是用的是许多jsp,或html页面来组成我们的项目的。

那么这样有什么缺点呢？

1. 每次请求返回的体积太大，加大了服务器的压力
2. 页面较大的话，会影响页面的加载速度。
3. 不能提供给用户良好的体验

所以，在以上的缺点的问题在SPA都能解决

SPA(single page application，SPA）

SPA,中每次加载都是获取到自己所需要的特定数据，所以才方便快捷。

所以要用各种组件合成的路由来构建SPA

路由的创建

先理清思路：

1. 先将需要用到的组件写好。
2. 给写好的组件合成一个路由（规划路线）。
3. 将合成好的路由放到路由器中。
4. 将路由器挂载在vue的实列上。
5. 定义瞄点 （body）
6. 尝试跳转 (body)

路由的使用

1

//就代表着使用Path 名字为Home 的组件

 
 
 
 
 
 
 





 	


文本

 {{msg}}



 	

 
 go to Home
 go to About



 	

 






 
 

router-link的相关属性

replace

加了这个之后就可以消除历史记录。

导航后不会留下 history 记录

go to Home

以及一些跟导航相关的操作：

this.$router.go(-1) ：代表着后退

this.$router.go(1)：代表着前进

this.$router.push({ 切换到name为home的路由

name:\’home\’

});

注意这个只能在vue的实列中使用

 1 new Vue({
 2 el:"#app",
 3 // 将路由器挂载到指定边界
 4 router: router,
 5 data: function() {
 6 return {
 7 ts: new Date().getTime()
 8 }
 9 }，methods:{
10 doForward:function(){
11 console.log(\'doForward方法被调用\');
12 this.$router.go(1);
13 },
14 doBack:function(){
15 console.log(\'doBack方法被调用\');
16 this.$router.go(-1);
17 }
18 }
19 });

append

这个也就是改变地址栏的位置

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

go to Home

渲染

有时候想要 渲染成某种标签，例如 `

foo
 

 	
foo