然后修改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: '
我是第 1 个子页面
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')
修改之后再打开浏览器，运行结果如下：
点击那两个链接试试，会发现的内容已经展示出来，同时注意浏览器地址已经变更。
