vue路由1.0_Vue2.0 系列教程：配置路由

上一节教程中，我们在项目中导入了路由和路由配置文件，这一节详细解释一下并配置路由。

一、路由使用

// 导入路由组件

import VueRouter from 'vue-router'

// 导入路由配置文件

import routerConfig from './routerConfig.js'

// 注册路由

Vue.use(VueRouter)

// 创建路由

const router = new VueRouter({

routes: routerConfig

})

// 实例化根组件，并绑定路由

new Vue({

router,

render: h => h(App)

}).$mount('#app')

提示：导入路由和导入其他的插件一样，导入都必须先用 Vue 注册，才能够使用。

二、路由配置

这里是返回一个路由配置数组，供路由使用。以下写法使用了路由的懒加载，只有当路由访问的时候才加载对应的组件，这样可以更高效，而不会打包出一个巨大的入口文件。其他详细的使用方式，请访问插件官网

export default [

{

path: '/',

component: resolve => require(['./views/index.vue'], resolve)

},

{

path: '/register',

component: resolve => require(['./views/register.vue'], resolve)

},

{

path: '/login',

component: resolve => require(['./views/login.vue'], resolve)

}

]

三、路由访问

现在可以直接访问 /login 等页面了，也可以在页面中点击跳转。这里有个跟1.0不同的是，链接使用 router-link 而不是 a，a作为实体外链的时候用

首页

注册

登录

第一讲：起步

第二讲： 构建环境和安装依赖

第三讲：开发页面