vue-一级路由配置

路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import File from '../views/File'
import Center from '../views/Center'
import Cinema from '../views/Cinema'
Vue.use(VueRouter)
const routes = [
  {
    path: '/File',
    component: File
  },
  {
    path: '/Center',
    component: Center
  },
  {
    path: '/Cinema',
    component: Cinema
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

引入组件：

import File from '../views/File'
import Center from '../views/Center'
import Cinema from '../views/Cinema'

封装路由容器：

  <div>
    <router-view></router-view>
  </div>

mian.js引用router

import Vue from 'vue' // SE6 模块导入方式 commonJS var Vue = require("vue")
import App from './App.vue' // var app = require("./App.vue")
import router from './router/index'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

验证：

http://localhost:8080/file(center,cinema)