路由配置:
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)