Vue.js学习系列（九）---使用路由搭建单页应用(二)

然后修改 main.js，引入并注册 vue-router

import VueRouter from "vue-router";

Vue.use(VueRouter);

并且配置路由规则和 app 启动配置项加上 router，旧版的 router.map 方法在 vue-router 2.0 已经不能用了。修改后的main.js如下:

import Vue from 'vue'

import App from './App.vue'

import VueRouter from "vue-router";

import VueResource from 'vue-resource'

//开启debug模式

Vue.config.debug = true;

Vue.use(VueRouter);

Vue.use(VueResource);

// 定义组件, 也可以像教程之前教的方法从别的文件引入

const First = { template: '<div><h2>我是第 1 个子页面</h2></div>' }

import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例

// 并且配置路由规则

const router = new VueRouter({

mode: 'history',

base: __dirname,

routes: [

{

path: '/first',

component: First

},

{

path: '/second',

component: secondcomponent

}

]

})

// 现在我们可以启动应用了！

// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。

const app = new Vue({

router: router,

render: h => h(App)

}).$mount('#app')

修改之后再打开浏览器，运行结果如下：





点击那两个链接试试，会发现<router-view class="view"></router-view>的内容已经展示出来，同时注意浏览器地址已经变更。