vue-router(1)

    <template>
      <div id="app">
        <div>我是APP</div>
        <a href="#/home">Home</a>  // 这里的地址要写 #/ 或者给index.js中的VueRouter实例配置一个mode字段 mode:‘history‘（这个字段会刷新页面）
        <a href="#/about">About</a>
    
        <li><router-link to="/home">Home</router-link></li>
        <li><router-link to="/doc">Doc</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <router-view></router-view>
    
      </div>
    </template>
    
    <script>
    export default {
      name: ‘App‘
    }
    </script>

    import Vue from ‘vue‘
    import VueRouter from ‘vue-router‘
    import Home from ‘../components/home.vue‘
    import About from ‘../components/about.vue‘
    
    Vue.use(VueRouter)
    
    export default new VueRouter({
        routes: [
            {
                path:‘/home‘,
                name: ‘home‘, // 如果路由很深，用name会方便一些
                component: Home
            },
            {
                path:‘/about‘,
                component: About
            }
        ]
    })

    import Vue from ‘vue‘
    import App from ‘./App‘
    import router from ‘./router‘
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: ‘#app‘,
      router,
      components: { App },
      template: ‘<App/>‘
    })

    <template>
        <div>我是{{title}}</div>
    </template>
    <script>
    import Home from ‘../components/home‘
    export default {
        data() {
            return {
                title: ‘HOME‘
            }
        }
    }
    </script>

    <template>
        <div>我是{{title}}</div>
    </template>
    <script>
    import About from ‘../components/about‘
    export default {
        data() {
            return {
                title: ‘ABOUT‘
            }
        }
    }
    </script>