vue-router實例

最近剛剛用vue寫了個公司項目，使用vue-cli構建的，算是中大型項目吧，然后這里想記錄并且分享一下其中的知識點，希望對大家有幫助,后期會逐漸分享；話不多說，直接上代碼！！

app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

?

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/common.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

router文件夾里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'    //這里可以選擇2種寫法，一種是寫在這里，一種是寫在component里面，看下方代碼~

Vue.use(Router)

export default new Router({
      mode:'history',
      routes: [
        {
          path: '/',
          component: home
        },
        {
            path:'/pagevue',
            component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
        },
        {
            path:'/nextpagevue',
            component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
        }
    ]
})

home.vue

<template>
    <div class="homeMain">
        <div>我是首頁</div>
        <div class="routerName" @click="clickMe">點我進下一個路由</div>
    </div>
</template>
<script>
export default{
    data(){
        return{

        }
    },
    methods:{
        clickMe(){
            this.$router.push({path:'/pagevue'})
        }
    }
}
</script>
<style>
</style>

pagevue.vue

<template>
    <div class="homeMain">
        <div>我是子頁面</div>
        <div class="routerName" @click="returnhome">點我繼續進下一個路由</div>
    </div>
</template>
<script type="text/javascript">
    export default{
        methods:{
            returnhome(){
                this.$router.push({path:'/nextpagevue'})
            }
        }
    }
</script>

nextpagevue.vue

<template>
    <div class="homeMain">
        <div>我是另外一個子頁面</div>
        <div class="routerName" @click="clickGohome">點我回到首頁</div>
    </div>
</template>
<script type="text/javascript">
    export default{
        methods:{
            clickGohome(){
                this.$router.push({path:'/'})
            }
        }
    }
</script>

common.css

* {
  margin: 0;
  padding: 0; }
.homeMain {
  text-align: center;
  margin-top: 100px; }
  .homeMain .routerName {
    color: #1eb89c;
    border: 1px solid #1eb89c;
    margin-top: 20px; }

/*# sourceMappingURL=common.css.map */

?