vue-router创建单页面

ps:(如果文章有任何错误，请大家谅解并指出。)

第一步、加载vue-router依赖

如果新建项目时，没有安装vue-router依赖的话，需要手动安装该依赖。在终端中输入
npm install vue-router

第二步、项目中添加路由及接口

1、添加router文件夹

在src目录下，新建一个router文件夹（与components文件夹同级），在该目录下新建一个index.js文件

import Vue from 'vue'
import Router from 'vue-router'
//这里import一个goods组件
import goods from '../components/goods/goods.vue' 

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'goods',
      component: goods
    }
  ],
  //重命名linkActiveClass ，因为选中的
  linkActiveClass: 'active'
})

2、main.js里面import router

import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
//这里的router.push功能是，当页面刷新是跳转到goods组件
router.push('/goods');

3、效果图