Vue路由配置-一级路由

目录结构

cinema.vue film.vue center.vue组件实例

<template>
	<div>Cinema|Film|Center</div>
</template>

<script>
</script>

<style>
</style>

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
// 导入路由
import router from './router'

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
	// 添加路由对象
	//这里的router为router index.js导出的router
	router: router,
	render: h => h(App),
}).$mount('#app')

index.js

import Vue from "vue";
// 从vue-router里面导入VueRouter
import VueRouter from "vue-router";
//导入组件
import film from "@/views/film.vue"
import center from "@/views/center.vue"
import cinema from "@/views/cinema.vue"
//注册模块
Vue.use(VueRouter);

const routes = [
	{
		//路径
		path: "/film",
		//组件
		component: film
	},
	{
		path: "/center",
		component: center
	},
	{
		path: "/cinema",
		component: cinema
	}
]

const router = new VueRouter({
	routes: routes
})

export default router

app.vue

<template>
	<div id="app">
		<!--路由容器-->
		<router-view></router-view>
	</div>
</template>

<script>

</script>

<style>

</style>

npm run serve 查看运行结果