enter the interface with an index.vue, (first-level routing)
""(")
"",
index.vue
<template>
<div class="wraper">
<div class="header">
</div>
<div class="section">
</div>
<div class="bottom">
<ul>
<li>
<router-link to="/film"></router-link>
</li>
<li>
<router-link to="/cinema"></router-link>
</li>
<li>
<router-link to="/my"></router-link>
</li>
</ul>
</div>
<router-view />
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style>
@import "../../css/index.css"
</style>
film.vue
<template>
<div class="section">
<ul>
<li>
<router-link to="/film_hot"></router-link>
</li>
<li>
<router-link to="/right_off"></router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "app"
}
</script>
<style>
</style>
router/index.js
import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"
import Index from "@/components/eyefilm/index"
import Film from "@/components/eyefilm/film"
import Cinema from "@/components/eyefilm/cinema"
import My from "@/components/eyefilm/my"
//
import Hot from "@/components/eyefilm/film_hot"
import Right from "@/components/eyefilm/right_off"
Vue.use(Router)
console.log(Index);
export default new Router({
routes: [{
path: "/index",
component: Index,
children: [{
//
path: "/cinema",
component: Cinema
}, {
//
path: "/my",
component: My
}, {
//
path: "/film",
component: Film
}, {
//
path: "/hot",
component: Hot
}, {
//
path: "/right",
component: Right
}]
}]
})