VueRouter

router文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Dunkirk from "@/views/Dunkirk.vue"
import Interstellar from "@/views/Interstellar.vue"
import Rise from "@/views/Rise.vue"
import Home from "@/views/Home.vue"
import About from "@/views/About.vue"
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    children:[
      {
        path: '/dunkirk',
        name: 'dunkirk',
        component: Dunkirk
      },
      {
        path: '/Interstellar',
        name: 'Interstellar',
        component: Interstellar
      },
      {
        path: '/rise',
        name: 'rise',
        component: Rise
      }
    ]
  },{
    path: '/xxx',
    name: "anonymouns",
    redirect: '/'
  },
  {
    path: '/rise/:id',
    name: 'idtest',
    component: About
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

然后是 App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

最后是子组件 Home.vue

<template>
  <div class="movies">
    <h2>
      Which Movies? 
    </h2>
    <router-link to="/Dunkirk"  active-class="highline">Dunkirk</router-link> 
    <br>
    <router-link to="/Interstellar"  active-class="highline">Interstellar</router-link>
    <br>
    <router-link to="/Rise" active-class="highline">Rise</router-link>
    <router-view/>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: 'Home',
}
</script>

active-class 并不是真的 class 而是表示动态的添加一个class 到当前标签里面