Vue + ElementUI 集成 Vue Router

最初發布於 szhshp的第三邊境研究所, 轉載請注明

最新寫 Vue 項目使用 ElementUI 做前端, 然后需要集成一個 vue Router, 主要功能是側邊欄不刷新而內容刷新, 看了幾個 starter 都和需求不太一樣, 因此干脆自己搞一個

Installation - Element UI

直接用的 element-starter

Installation - Vue Router

npm install vue-router

main.js

Entry 文件里面要進行修改, 將 vueRouter 用作插件, 並且引用 routes

這里進行了: 將 App 渲染到 #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

這個文件的核心就是要放一個 <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

最后准備下幾個不同的 components 即可, 下面是一個例子

    // Home.vue

    
 
 
 
         
    

源碼

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