这里说的Vue中的路由是指前端路由，与后端路由有所区别。我们可以使用url来获取服务器的资源，而这种url与资源的映射关系就是我们所说的路由。对于单页面程序来说，我们使用url时常常通过hash的方法切换页面，即我们常用的锚点。比如：
<a href="#here">click me</a> /*跳转到对应的锚点*/
<!-- ... -->
<div id="here">you find me</div> /*设置锚点*/
而请求路径中的hash不会传到后端，所以常常被用作前端切换页面的方法，即在同一服务器资源下对页面进行切换。
下面分别从Node和Vue中使用路由，来感受具体的区别。
一、使用Node中的路由：express自带ruoter
先看一下需要完成的效果：
当我们点击页面上的Home和About按钮是会跳转到对应的服务器资源页面。
首先安装必要的模块，创建文件目录结构和前端资源文件。
# 初始化目录
npm init -y
# 安装需要的模块
npm install express art-template express-art-template
其他资源页面可以在参考这里（可直接下载运行）
二、使用Vue中的路由：VueRouter
我们使用官方路由来创建一个简单的单页面应用：
1、VueRouter的简单入门
首先我们需要安装Vue.js和VueRouter.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
-
html代码
<div id="app"> <p> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> </p> <router-view></router-view> </div>router-link是VueRouter提供的组件，默认会创建一个a标签，并将to属性的值作为hash值最为该链接的地址。router-view也是VueRouter提供的组件，用来显示路由对应的模板。 -
js代码
//1、创建路由视图组件:包含了模板信息 var home = {template: '<h3>This is home page!</h3>'}; var about = {template: '<h3>This is about page!</h3>'}; //2、创建路由规则（路由的映射关系）:是一个对象数组，相当于路由映射关系表 var routes = [ {path: '/home', component: home}, {path: '/about', component: about} ]; //3、创建一个路由实例 var router = new VueRouter({ routes: routes }); //4、将路由搭载到Vue实例中 new Vue({ el: '#app', router: router });
2、router-link
<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。
通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
-
to（String｜Location, required）to属性规定了链接跳转的路径，所以是必须的，可以是字符串，也可以是表示路径位置的对象。<!--将会渲染为：/home--> <router-link to="home">link</router-link> <!--也可以动态绑定--> <router-link :to="'home'"></router-link> <!--动态绑定时便可以传入对象,以下渲染为：/home?useid=123 --> <router-link :to="{path: 'home', query: {useid: '123'}}"></router-link> -
replace默认为false，当设置该属性后路由不会执行
router.push()，而是执行router.replace()，这样浏览器的history将不会产生导航记录。<router-link to="home" replace></router-link> -
append如果设置了该属性，则连接会变成相对链接。比如从
/a处点击了连接为/b的来链接，则访问的地址将变为/a/b。 -
tag指定导航链接渲染的标签，默认为
a标签。渲染为其他标签后任然会监听点击事件，具有导航效果。 -
active-class设置链接激活后使用的css类名，默认值为
router-link-active，设置后默认值任然存在。默认值可通过路由构造选项linkActiveClass进行配置。 -
exact"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。举个例子，如果当前的路径是
/a开头的，那么<router-link to="/a">也会被设置 CSS 类名。 -
event(String | Array< String >)设置激活导航的事件。默认为
clcik。 -
exact-active-calss配置当链接被精确匹配的时候应该激活的 class。默认值
router-link-exact-active，该默认值也是可以通过路由构造函数选项linkExactActiveClass进行全局配置的。
3、router-view
<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件。
4、路由构建选项
在创建路由是可传入的参数，上面的实例中我们传入了路由规则信息的routes，此外还有其他参数。
-
routes(Array < routeConfig >)routes是包含路由映射关系的数组，数组的每一项都包含了一条路由映射信息。routeConfig可以包含一些信息：declare type routeConfig = { path: string, //路径 component: componentObj,//视图组件 name: string,//命名路由 components: {[name: string]: componentObj},//命名视图组件 redirect: string | Location | Function, props: boolean | Object | Function, alias: string | Array<string>, children: Array<RouteConfig>, // 嵌套路由 beforeEnter: (to: Route, from: Route, next: Function) => void, meta: any, // 2.6.0+ caseSensitive: boolean,// 匹配规则是否大小写敏感？(默认值：false) pathToRegexpOptions: Object// 编译正则的选项 } -
mode最开始说到的前端路由和后端路由的差别，我们可以使用
mode来配置路由的模式，有以下三种模式：-
hash：浏览器模式，会在链接前加上"#"最为俩链接，支持所有浏览器。 -
history：依赖 HTML5 History API 和服务器配置。 -
abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。
-
-
base设置路由的基路径，默认为"/"。
linkActiveClasslinkExactActiveClass
此外还有一些其他可供选择的项，这里不再一一赘述。更多细节请参考：Vue-router官方文档
5、路由实例属性
-
router.app：配置了该路由的Vue根实例。 -
router.mode：路由的模式。 -
router.currentRute：当前路由对应的路由信息对象。
6、 路由对象
一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。
路由对象可以出现在多个地方，自如组件内：this.$route。（注意是$route而不是$router，前者是路由对象，后者是路由实例）。
路由对象有以下属性：
- $route.path：当前导航路径。
- $route.params：一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
- $route.query：一个 key/value 对象，表示 URL 查询参数。
-
$route.hash：当前路由的 hash 值 (带
#) ，如果没有 hash 值，则为空字符串。 - $route.fullPath：完成解析后的 URL，包含查询参数和 hash 的完整路径。
-
$route.matched：一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是
routes配置数组中的对象副本 (还有在children数组)。 - $route.name：当前路由的名称，如果有的话。
- $route.redirectedFrom：如果存在重定向，即为重定向来源的路由的名字。
更多细节请参考：Vue-router官方文档
7、一些简单的例子
#路由对象的使用
<p>
<!--注意：这里如果没有 / 就会变成append模式 ，即在当前连接下添加连接-->
<router-link to="/query?id='123'&name='jinx'">Query</router-link>
<router-link to="/params/456/yasuo">Params</router-link>
</p>
<router-view></router-view>
//1、创建路由视图组件:在模版中掉用路由对象
var query = {template: '<h3>this is query: id=<em>{{$route.query.id}}</em>&name=<em>{{$route.query.name}}</em></h3>'};
var params = {template: '<h3>This is params: id=<em>{{$route.params.id}}</em>, name=<em>{{$route.params.name}}</em></h3>'};
//2、创建路由规则
var routes = [
{path: '/query', component: query},
{path: '/params/:id/:name', component: params}
];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
#路由嵌套
<div id="app">
<!--路由-->
<router-link to="/">Home</router-link>
<router-link to="/account">Account</router-link>
<router-view></router-view>
<!--模板-->
<script type="text/template" id="account-template">
<div>
<h3>用户操作界面</h3>
<!--子路由-->
<router-link to="/account/login">login</router-link>
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>
</script>
</div>
//1、创建路由视图组件
var home = {template: '<h3>home page</h3>'};
var account = {template: '#account-template'};//可以导入模板(这里使用template标签的使用有bug不知道什么原因)
var login = {template: '<h3>登陆</h3>'};
var register = {template: '<h3>注册</h3>'};
//2、创建路由规则
var routes = [
{path: '/', component: home},
{path: '/account',
component: account,
children: [
{path: '/account/login', component: login},
{path: '/account/register', component: register}
]
},
];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
可以尝试一下如果子路由也写在外部routes的效果（当写在外部就会共用router-view标签）。关于模板需要注意的是，可以使用类似script这样的标签来包裹模板，然后根据id进行引用即可，另外，模板只能有一个根元素。关于模板标签的使用可以参考这篇文章：HTML5 template 标签元素简介
#命名视图组件
目前我们都只是用了一个router-view标签，如果我们需要使用多个，那我们就需要对组件进行命名，否则无法找到要渲染的位置。注意，使用的是conponents而非component。
比如下面的例子：
<div id="app">
<!--对路由视图进行命名-->
<router-view></router-view>
<div style="display: flex;height: 800px;">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>
//1、创建路由视图组件
var header = {template: '<div class="header">header</div>'};
var left = {template: '<div class="left">left</div>'};
var main = {template: '<div class="main">main</div>'};
//2、创建路由规则
var routes = [
{path: '/',
components: {
default: header,
left: left,
main: main
}//命名视图组件
}];
//3、创建一个路由实例
var router = new VueRouter({
routes: routes
});
//4、将路由搭载到Vue实例中
new Vue({
el: '#app',
router: router
});
再添加一下样式：
body{
margin: 0px;
padding: 0px;
}
.header{
background-color: #6aa4d2;
height: 100px;
}
.left{
background-color: #999ddd;
flex: 2;
}
.main{
background-color: #b6b985;
flex: 8;
}
就可以看到以下布局效果：
