vue2.0路由怎么配置

這篇文章主要介紹了vue2.0路由怎么配置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

項目基本手腳架搭建完畢后，建一個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 ></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 ></div> 
    <router-view transition transition-mode="out-in"></router-view> 
    <div ></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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue2.0路由怎么配置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!