vue+koa 美团实战之vue基础3: 路由

路由

• 引入路由

npm i vue-router --save

• 如何使用？ router.js

引入

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    //引入组件
    import xxx from 'xxx'

使用

    Vue.use(vue-router);

定义routes

    const routes = [
        {
            path: 'xxx',
            components: 'xxx'
        }
    ]

实例化VueRouter

    const router = new VueRouter({
        routes
    })

输出

    export default router

---

完整的router.js代码

    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import PageA from './components/PageA';
    import PageB from './components/PageB';
    Vue.use(VueRouter);

    const routes = [
      {
        path: '/pagea',
        component: PageA
      },
      {
        path: '/pageb',
        component: PageB
      }
    ];

    const router = new VueRouter({
      routes
    });
    
    export default router;

---

然后在main.js注入

    import Vue from 'vue'
    // import App from './App.vue'
    import router from './router'
    
    Vue.config.productionTip = false
    
    new Vue({
      router
    }).$mount('#app')

新建vue.config.js

module.exports = {
    runtimeCompiler: true
}

最后在index.html中使用router-view, 挂载路由文件