Vue + ElementUI assembled Vue Router

Originally released in the third border of the Institute szhshp , please indicate

Vue project using the latest write ElementUI do the front, then need to integrate a vue Router, the main function is the sidebar does not refresh content refresh , read a few starter and needs are not the same, and so had to engage in its own

Installation - Element UI

Directly with element-starter

Installation - View Router

npm install vue-router

main.js

Entry file inside to be modified, the vueRouter used as a plug, and reference routes

Here: the App will render to #app

    import Vue from 'vue'
    import VueRouter from 'vue-router'

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'
    import routes from './routes'

    Vue.use(ElementUI)
    Vue.use(VueRouter);

    Vue.config.productionTip = false;

    const router = new VueRouter({ routes });

    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app');

app.vue

The core of this document is to put a <router-view>

    
 
 

    (...)

routes.js

    import Home from './components/Home.vue';
    import Tags from './components/Tags.vue';

    const routes = [
        { path: '/', component: Home },
        { path: '/tags', component: Tags },
    ];


    export default routes;

Home.vue

Finally, you can prepare several different components, the following is an example

    // Home.vue

    
 
 
    

Source

https://github.com/szhielelp/Vue-ElementUI-Router