vue路由配置

项目基本手脚架搭建完毕后，建一个router文件夹，里面配置一个index.js文件。

文件内容：

npm install vue-router vue-resource --save-dev（安装 vue 路由模块vue-router和网络请求模块vue-resource）

 

[javascript]  view plain  copy

 

1. import Vue from 'vue'  
2. import Router from 'vue-router'  （----引入路由---注释说明）  
3. import About from '@/components/about'（--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块）  
4. import Home from '@/components/home'  
5. import Brand from '@/components/brand'  
6. import Company from '@/components/company'  
7. import Connect from '@/components/connect'  
8. import Main from '@/components/main'  
9. import Join from '@/components/join'  
10. import News from '@/components/news'  
11. import Products from '@/components/products'  
12. import son1 from '@/components/son1'  
13. import son2 from '@/components/son2'  
14. import list from '@/components/list'  
15. import newList from '@/components/newList'  
16. import culture from '@/components/culture'  
17. import certification from '@/components/certification'  
18. import zhuanjia from '@/components/zhuanjia'  
19. Vue.use(Router)  （--使用---）  
20.   
21. export default new Router({  
22.   routes: [  
23.     {  
24.       path: '/main',  
25.       name: 'main',  
26.       component: Main  
27.     },--------------------------------  
28.     { path: '/',                      这里是路由重定向，比如页面加载时候进入首页  
29.       redirect: '/main'                   （比如给路由一个选中后的样式为红色  那么这里就能用到了---.router-link-active{样式}）  
30.     },---------------------------------  
31.     {---------------------这里是配置子路由  
32.       path: '/brand',  
33.       name: 'brand',  
34.       component: Brand,  
35.       children: [  
36.         {  
37.           path: '/',  
38.           name: 'newList',  
39.           component: newList  
40.         },  
41.         {  
42.           path: '/brand/culture',  
43.           name: 'culture',  
44.           component: culture  
45.         },  
46.         {  
47.           path: '/brand/certification',  
48.           name: 'certification',  
49.           component: certification  
50.         },  
51.         {  
52.           path: '/brand/zhuanjia',  
53.           name: 'zhuanjia',  
54.           component: zhuanjia  
55.         }  
56.       ]  
57.     },  
58.     {  
59.       path: '/about',  
60.       name: 'about',  
61.       component: About  
62.     },  
63.     {  
64.       path: '/company',  
65.       name: 'company',  
66.       component: Company  
67.     },  
68.     {  
69.       path: '/connect',  
70.       name: 'connect',  
71.       component: Connect  
72.     },  
73.     {  
74.       path: '/home',  
75.       name: 'home',  
76.       component: Home  
77.     },  
78.     {  
79.       path: '/join',  
80.       name: 'join',  
81.       component: Join,  
82.       children: [  
83.         {  
84.           path: '/',  
85.           name: 'son1',  
86.           component: son1  
87.         },  
88.         {  
89.           path: '/join/son2',  
90.           name: 'son2',  
91.           component: son2  
92.         }  
93.       ]  
94.     },  
95.     {  
96.       path: '/list',  
97.       name: 'list',  
98.       component: list  
99.     },  
100.     {  
101.       path: '/news',  
102.       name: 'news',  
103.       component: News  
104.     },  
105.     {  
106.       path: '/products',  
107.       name: 'products',  
108.       component: Products  
109.     }  
110.   ]  
111. })  

接下来就是在每一个模块文件中加入这样的一句话暴露出去：

[javascript]  view plain  copy

 

1. <script>  
2. export default {  
3.   name: 'about'  ---自定义模块名字  
4. }  
5. </script>  

在app中我们可以这样写：

 

 

[javascript]  view plain  copy

 

1. <template>  
2.   <div id="app1" class="pagebox">  
3.         <div style="clear:both;"></div>  
4.         <ul class="index-tap">  
5.             <li><router-link to="/main">首页<p></p></router-link></li>  
6.             <li><router-link to="/about">关于我们<p></p></router-link></li>  
7.             <li><router-link to="/products">产品专区<p></p></router-link></li>  
8.             <li><router-link to="/news">新闻资讯<p></p></router-link></li>  
9.         </ul>  
10.         <ul class="index-tap">  
11.             <li><router-link to="/company">企业风采<p></p></router-link></li>  
12.             <li><router-link to="/join">招商加盟<p></p></router-link></li>  
13.             <li><router-link to="/connect">联系我们<p></p></router-link></li>  
14.             <li><router-link to="/brand">品牌介绍<p></p></router-link></li>  
15.         </ul>  
16.         <div style="clear:both;"></div>  
17.         <router-view transition transition-mode="out-in"></router-view>  
18.         <div style="clear:both;"></div>  
19.         <ul class="index-footer clearx">  
20.             <li v-on:click="showph = !showph">电话</li>  
21.             <li v-on:click="showmap = !showmap">地图</li>  
22.             <li v-on:click="showd = !showd">分享</li>  
23.             <!-- JiaThis Button BEGIN -->  
24.             <transition name="slide-fade">  
25.             <div class="jiathis_style_32x32 share" v-show="showd">  
26.                 <a class="jiathis_button_qzone"></a>  
27.                 <a class="jiathis_button_tsina"></a>  
28.                 <a class="jiathis_button_tqq"></a>  
29.                 <a class="jiathis_button_weixin"></a>  
30.                 <a class="jiathis_button_renren"></a>  
31.             </div>  
32.             </transition>  
33.             <!-- JiaThis Button END -->  
34.             <transition name="slide-fade">  
35.             <div class="share sharephone" v-show="showph">  
36.                 18305452462  
37.             </div>  
38.             </transition>  
39.             <transition name="slide-fade">  
40.             <div class="share showmap" v-show="showmap">  
41.                 <ditu></ditu>---------------------------------自定义模板  
42.             </div>  
43.             </transition>  
44.         </ul>  
45.         <div class="fuceng" v-if="showmap"></div>  
46.   </div>  
47. </template>  
48.   
49. <script>  
50. import ditu from '@/components/home'  
51. export default {  
52.   name: 'app',  
53.   data () {  
54.     return {  
55.       search: '',  
56.       showd: false,  
57.       showph: false,  
58.       showmap: false  
59.     }  
60.   },  
61.   mounted () {  
62.     this.init()  
63.   },  
64.   methods: {  
65.     Search () {  
66.       if (this.search !== '') {  
67.         this.$router.push({  
68.           path: '/list',  
69.           query: {  
70.             serInfo: this.search  
71.           }  
72.         })  
73.       } else {  
74.         alert('请输入搜索内容')  
75.       }  
76.     },  
77.     init: function () {  
78.       let url = 'http://v3.jiathis.com/code/jia.js'  
79.       let script = document.createElement('script')  
80.       script.setAttribute('src', url)  
81.       document.getElementsByTagName('head')[0].appendChild(script)  
82.     }  
83.   },  
84.   components: {  
85.     ditu  
86.   }  
87. }  
88. </script>