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>的内容已经展示出来，同时注意浏览器地址已经变更。