前言

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

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

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

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

SPA的概念

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

那么这样有什么缺点呢？

每次请求返回的体积太大，加大了服务器的压力

页面较大的话，会影响页面的加载速度。

不能提供给用户良好的体验

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

SPA(single page application，SPA)

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

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

路由的创建

先理清思路：

先将需要用到的组件写好。

给写好的组件合成一个路由(规划路线)。

将合成好的路由放到路由器中。

将路由器挂载在vue的实列上。

定义瞄点 (body)

尝试跳转 (body)

//定义两个组件

const Home =Vue.extend({

template: '

'});

const About =Vue.extend({

template: '

'});

//定义路由

//规划路线

var routes =[{

path: '/Home', component: Home }, { path: '/About', component: About }]; //将路由放入到路由器中 const router = newVueRouter({ routes }); newVue({ el: '#app', router, data() { return{ msg: "hello"}; } });

路由的使用

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

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

渲染

有时候想要 渲染成某种标签，例如 ``。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

foo

foo

总结

为了以后整合页面，打好基础

Thanks♪(･ω･)ﾉ希望对大家有所帮助