# 一、路由配置
1. 跳转
在配置路由前，首先我们要明确一点就是，多页应用中的每个单页都是相互隔离的，即如果你想从
page1下的路由跳到page2下的路由，你无法使用vue-router中的方法进行跳转，需要使用原生方法：location.href或location.replace
此外为了能够清晰的分辨路由属于哪个单页，我们应该给每个单页路由添加前缀，比如
index单页：/vue/page1单页：/vue/page1/page2单页：/vue/page2/-
其中
/vue/为项目的二级目录，其后的目录代表路由属于哪个单页。因此我们每个单页的路由配置可以像这样
/* page1 单页路由配置 */
import Vue from 'vue'
import Router from 'vue-router'
// 首页
const Home = (resolve => {
require.ensure(['../views/home.vue'], () => {
resolve(require('../views/home.vue'))
})
})
Vue.use(Router)
let base = `${process.env.BASE_URL}` + 'page1'; // 添加单页前缀
export default new Router({
mode: 'history',
base: base,
routes: [
{
path: '/',
name: 'home',
component: Home
},
]
})
@前端进阶之旅: 代码已经复制到剪贴板
我们通过设置路由的
base值来为每个单页添加路由前缀，如果是index单页我们无需拼接路由前缀，直接跳转至二级目录即可
那么在单页间跳转的地方，我们可以这样写
<template>
<div id="app">
<div id="nav">
<a @click="goFn('')">Index</a> |
<a @click="goFn('page1')">Page1</a> |
<a @click="goFn('page2')">Page2</a> |
</div>
<router-view/>
</div>
</template>
