vue-cli Vue Router的使用

1.如果你在初始化项目的时候安装了vue-router 在src目录下会自动生成router文件夹|router/index.js  

  如果没有安装，需要手动安装 并在src目录下创建文件夹router|router/index.js

npm install vue-router -S

  在index.js中写如下代码

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  mode:'history', // 去掉地址栏中的'#'
  routes: [
    {
      // 路由重定向
      path:'*',
      redirect:'/'
    },
    {
      path: '/',
      name: 'home',
      component: (resolve) => require(['../components/Home.vue'],resolve)
    },
    {
      path: '/city',
      name: 'city',
      component: (resolve) => require(['../components/City.vue'],resolve)
    }
  ]
})

2.在main.js中引入路由

import router from './router'

// 插入根实例
new Vue({
  el: '#app',
  router, // 插入
  store,
  components: { App },
  template: '<App/>'
})