import Vue from 'vue' import Router from 'vue-router' （----引入路由---注釋說明） import About from '@/components/about'（--這些需要引入的是components文件夾下面創(chuàng)建的一些模板---相對路徑----about代表about.vue模塊） import Home from '@/components/home' import Brand from '@/components/brand' import Company from '@/components/company' import Connect from '@/components/connect' import Main from '@/components/main' import Join from '@/components/join' import News from '@/components/news' import Products from '@/components/products' import son1 from '@/components/son1' import son2 from '@/components/son2' import list from '@/components/list' import newList from '@/components/newList' import culture from '@/components/culture' import certification from '@/components/certification' import zhuanjia from '@/components/zhuanjia' Vue.use(Router) （--使用---）  export default new Router({  routes: [   {    path: '/main',    name: 'main',    component: Main   },--------------------------------   { path: '/',           這里是路由重定向，比如頁面加載時候進入首頁    redirect: '/main'          （比如給路由一個選中后的樣式為紅色 那么這里就能用到了---.router-link-active{樣式}）   },---------------------------------   {---------------------這里是配置子路由    path: '/brand',    name: 'brand',    component: Brand,    children: [     {      path: '/',      name: 'newList',      component: newList     },     {      path: '/brand/culture',      name: 'culture',      component: culture     },     {      path: '/brand/certification',      name: 'certification',      component: certification     },     {      path: '/brand/zhuanjia',      name: 'zhuanjia',      component: zhuanjia     }    ]   },   {    path: '/about',    name: 'about',    component: About   },   {    path: '/company',    name: 'company',    component: Company   },   {    path: '/connect',    name: 'connect',    component: Connect   },   {    path: '/home',    name: 'home',    component: Home   },   {    path: '/join',    name: 'join',    component: Join,    children: [     {      path: '/',      name: 'son1',      component: son1     },     {      path: '/join/son2',      name: 'son2',      component: son2     }    ]   },   {    path: '/list',    name: 'list',    component: list   },   {    path: '/news',    name: 'news',    component: News   },   {    path: '/products',    name: 'products',    component: Products   }  ] }) 

<script> export default {  name: 'about' ---自定義模塊名字 } </script> 

 <template>  <div id="app1" class="pagebox">     <div style="clear:both;"></div>     <ul class="index-tap">       <li><router-link to="/main">首頁<p></p></router-link></li>       <li><router-link to="/about">關于我們<p></p></router-link></li>       <li><router-link to="/products">產品專區(qū)<p></p></router-link></li>       <li><router-link to="/news">新聞資訊<p></p></router-link></li>     </ul>     <ul class="index-tap">       <li><router-link to="/company">企業(yè)風采<p></p></router-link></li>       <li><router-link to="/join">招商加盟<p></p></router-link></li>       <li><router-link to="/connect">聯(lián)系我們<p></p></router-link></li>       <li><router-link to="/brand">品牌介紹<p></p></router-link></li>     </ul>     <div style="clear:both;"></div>     <router-view transition transition-mode="out-in"></router-view>     <div style="clear:both;"></div>     <ul class="index-footer clearx">       <li v-on:click="showph = !showph">電話</li>       <li v-on:click="showmap = !showmap">地圖</li>       <li v-on:click="showd = !showd">分享</li>       <!-- JiaThis Button BEGIN -->       <transition name="slide-fade">       <div class="jiathis_style_32x32 share" v-show="showd">         <a class="jiathis_button_qzone"></a>         <a class="jiathis_button_tsina"></a>         <a class="jiathis_button_tqq"></a>         <a class="jiathis_button_weixin"></a>         <a class="jiathis_button_renren"></a>       </div>       </transition>       <!-- JiaThis Button END -->       <transition name="slide-fade">       <div class="share sharephone" v-show="showph">         18305452462       </div>       </transition>       <transition name="slide-fade">       <div class="share showmap" v-show="showmap">         <ditu></ditu>---------------------------------自定義模板       </div>       </transition>     </ul>     <div class="fuceng" v-if="showmap"></div>  </div> </template>  <script> import ditu from '@/components/home' export default {  name: 'app',  data () {   return {    search: '',    showd: false,    showph: false,    showmap: false   }  },  mounted () {   this.init()  },  methods: {   Search () {    if (this.search !== '') {     this.$router.push({      path: '/list',      query: {       serInfo: this.search      }     })    } else {     alert('請輸入搜索內容')    }   },   init: function () {    let url = 'http://v3.jiathis.com/code/jia.js'    let script = document.createElement('script')    script.setAttribute('src', url)    document.getElementsByTagName('head')[0].appendChild(script)   }  },  components: {   ditu  } } </script>