深入理解vue2.0路由如何配置问题

import Vue from 'vue' import Router from 'vue-router' （----引入路由---注释说明） import About from '@/components/about'（--这些需要引入的是components文件夹下面创建的一些模板---相对路径----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">产品专区<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">企业风采<p></p></router-link></li>       <li><router-link to="/join">招商加盟<p></p></router-link></li>       <li><router-link to="/connect">联系我们<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>