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

这两天学习了Vue.js 感觉路由这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

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

文件内容：

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

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> 

在app中我们可以这样写：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。