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:;
   padding:; }
 .homeMain {
   text-align: center;
   margin-top: 100px; }
   .homeMain .routerName {
     color: #1eb89c;
     border: 1px solid #1eb89c;
     margin-top: 20px; }

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