vue-router實例

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

main.js

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 import './assets/css/common.css'
 7 
 8 Vue.config.productionTip = false
 9 
10 /* eslint-disable no-new */
11 new Vue({
12   el: '#app',
13   router,
14   template: '<App/>',
15   components: { App }
16 })

router文件夾裡面的index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import home from '../components/home'    //這裡可以選擇2種寫法，一種是寫在這裡，一種是寫在component裡面，看下方代碼~
 4 
 5 Vue.use(Router)
 6 
 7 export default new Router({
 8       mode:'history',
 9       routes: [
10         {
11           path: '/',
12           component: home
13         },
14         {
15             path:'/pagevue',
16             component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
17         },
18         {
19             path:'/nextpagevue',
20             component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
21         }
22     ]
23 })

home.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是首頁</div>
 4         <div class="routerName" @click="clickMe">點我進下一個路由</div>
 5     </div>
 6 </template>
 7 <script>
 8 export default{
 9     data(){
10         return{
11 
12         }
13     },
14     methods:{
15         clickMe(){
16             this.$router.push({path:'/pagevue'})
17         }
18     }
19 }
20 </script>
21 <style>
22 </style>

pagevue.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是子頁面</div>
 4         <div class="routerName" @click="returnhome">點我繼續進下一個路由</div>
 5     </div>
 6 </template>
 7 <script type="text/javascript">
 8     export default{
 9         methods:{
10             returnhome(){
11                 this.$router.push({path:'/nextpagevue'})
12             }
13         }
14     }
15 </script>

nextpagevue.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是另外一個子頁面</div>
 4         <div class="routerName" @click="clickGohome">點我回到首頁</div>
 5     </div>
 6 </template>
 7 <script type="text/javascript">
 8     export default{
 9         methods:{
10             clickGohome(){
11                 this.$router.push({path:'/'})
12             }
13         }
14     }
15 </script>

common.css

 1 * {
 2   margin: 0;
 3   padding: 0; }
 4 .homeMain {
 5   text-align: center;
 6   margin-top: 100px; }
 7   .homeMain .routerName {
 8     color: #1eb89c;
 9     border: 1px solid #1eb89c;
10     margin-top: 20px; }
11 
12 /*# sourceMappingURL=common.css.map */