vue-router实例

最近刚刚用vue写了个公司项目，使用vue-cli构建的，算是中大型项目吧，然后这里想记录并且分享一下其中的知识点，希望对大家有帮助,后期会逐渐分享；话不多说，直接上代码！！

app.vue

 1 <template>
 2   <div id="app">
 3     <router-view></router-view>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'app'
10 }
11 </script>
12 
13 <style>
14 
15 </style>

 

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 */