# 1.1 路由配置
我们来看一下
CLI给我们生成的router.js文件的配
/* router.js */
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue' // 引入 Home 组件
import About from './views/About.vue' // 引入 About 组件
Vue.use(Router) // 注册路由
export default new Router({
routes: [{
path: '/',
name: 'home',
component: Home
}, {
path: '/about',
name: 'about',
component: About
}]
})
@前端进阶之旅: 代码已经复制到剪贴板
这份配置可以算是最基础的路由配置，有以下几点需要进行优化：
- 如果路由存在二级目录，需要添加 base 属性，否则默认为
"/" - 默认路由模式是
hash模式，会携带 # 标记，与真实url不符，可以改为history模式 - 页面组件没有进行按需加载，可以使用
require.ensure()来进行优化
下面是我们优化结束的代码：
/* router.js */
import Vue from 'vue'
import Router from 'vue-router'
// 引入 Home 组件
const Home = resolve => {
require.ensure(['./views/Home.vue'], () => {
resolve(require('./views/Home.vue'))
})
}
// 引入 About 组件
const About = resolve => {
require.ensure(['./views/About.vue'], () => {
resolve(require('./views/About.vue'))
})
}
Vue.use(Router)
let base = `${process.env.BASE_URL}` // 动态获取二级目录
export default new
