vue的路由

声明：该文章只适用于vue 2.x版本的项目。
一、概念
vue遵循SPA（Single page application)单一页面应用程序，只有一个完整的页面，它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中的内容。
vue中路由控制显示哪个页面，这些显示的页面还是在主页面中显示（在主页面的某一块区域显示，即通过路由达到局部刷新的效果。
路由通过url在主页面的不同地方显示页面。

二、通过例子来显示如何使用路由
1、下载vue-router.js包
命令：npm install --save vue-router

安装好后package.json中添加以下依赖

2、新建一个view文件夹，里面存放“页面”的.vue文件（这里添加了First.vue和Second.vue两个页面）。注意，页面和组件本质上都是.vue文件，只是用法不同。

First.vue文件：

Second.vue文件：

3、修改main.js配置文件

4.在主页面App.vue中添加router-view标签，该标签的位置即是在不同url下First.vue和Second.vue页面显示在主页面中的位置。

5.效果如下
启动项目：

修改路径：


三、让JS控制页面的跳转
实例：点击按钮实现页面跳转
（1）在App.vue文件中添加按钮标签：

（2）添加事件：

对跳转到Second页面的按钮做同样的操作。
（3）添加事件函数

（4）项目效果
运行项目

点击第一个按钮：

点击第二个按钮：

四、优化路由代码结构
将main.js文件中关于路由的代码单独取出放入另一个新建的.js文件中
在router文件夹的index.js中写入以下内容：

注意下面的代码需要放在main.js文件中：
注意：index.js文件末尾加一行（防止router定义却未用时报错）：

export default语法表示其他地方引入这个文件时，默认就使用router对象。
main.js文件中加一行：

通过上述操作与三中的实例效果相同。
说明：路径中的@/是webpack设置的路径别名，代表src路径，在vue模板里面的build/webpack.base.conf文件里可以查看：

补充VUE中的export default和export：
vue 通过webpack实现模块化，使用export导出模块，使用import引入模块。
（1）export
一个独立的文件是一个模块，该文件内部的所有变量外部无法获取。如果想要外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量：

// profile.js
export var firstName = 'Jack';
export var lastName = 'Lucy';
export var  year = 1958;

上面的代码是profile.js文件，保存了用户信息。ES6将其视为一个模块，里面用export命令对外部输出了三个变量。
export除了上面的写法，还有另外一种：

// profile.js
var firstName = 'Jack';
var lastName = 'Lucy';
var  year = 1958;

export {firstName, lastName, year};

上面的代码在export命令之后，使用大括号指定所要输出的一组变量。优先考虑这种写法，因为这样就可以写在文件尾部。
export除了输出变量，还可以输出函数或类：

export function multiply(x, y){
return x * y;
}

export还可以输出vue对象（组件），如下图：

import命令接受一对花括号，里面指定从其他模块导入的变量名。花括号里面的变量名，必须与被导入模块（这里为profile.js）对外接口的名称相同。

import lastName from './profile.js'

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname} from './profile.js'

（2）export default
export default命令，为模块指定默认输出。使用import指令导入使用export命令导出的组件时，用户需要知道所要加载的变量名或函数名，否则无法加载，export default可以解决这个问题。。
例子：

//export-defaut.js
export default function(){
console.log('foo');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

//import-default.js
import customName from './export-default'

本质上，export default就是输出一个叫做default的变量和方法，然后系统允许你为它取任意名字。因为export default命令只是输出一个叫做defalut的变量，所以它后买你不能跟变量声明语句，但可以匿名。

//demo1.js
export default {
a:'hello',
b:'world'
}

对应的引入方式：

//demo2.js
import obj from 'demo1'

（3）export与export default区别
export可以导出多个命名模块,导入多个模块用花括号括起来且名字与导出一致（或用as重命名）；export default只能导出一个模块，import命令导入可以任意命名，且不使用花括号。