vue-router單頁(yè)面路由

更新時(shí)間：2017年06月17日 15:52:40 作者：孫三峰

這篇文章主要為大家詳細(xì)介紹了vue-router單頁(yè)面路由的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue中，有一個(gè)類(lèi)庫(kù)叫做vue-router，是用來(lái)做單頁(yè)面路由的。做路由一般分為四個(gè)步驟：

準(zhǔn)備一個(gè)根組件　　vue.extend()；
需要做路由的內(nèi)容準(zhǔn)備　　template；
準(zhǔn)備路由 new VueRouter（）；
關(guān)聯(lián)路由 map
啟動(dòng)路由 start(App,'#box')；//第一個(gè)參數(shù)是準(zhǔn)備的根組件，第二個(gè)參數(shù)是要捆綁的位置就是自己定義的id中

github上vue-router下載地址：https://github.com/vuejs/vue-router

關(guān)于路由跳轉(zhuǎn)的簡(jiǎn)單代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <div id="box">
      <ul>
        <li>
          <a v-link="{path:'/home'}">我是第一個(gè)a</a>
        </li>
        <li >
          <a v-link="{path:'news'}">我是第二個(gè)a</a>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </body>
  <script>
    //1.準(zhǔn)備一個(gè)根組件
    var App=Vue.extend();
    
    //2.Home News 組件準(zhǔn)備
    var Home=Vue.extend({
      template:'<h3>我是第一個(gè)a的內(nèi)容頁(yè)</h3>'
    });
    
    var News=Vue.extend({
      template:'<h3>我是第二個(gè)a的內(nèi)容頁(yè)</h3>'
    })
    
    //3.準(zhǔn)備路由
    var router = new VueRouter();
    
    //4.關(guān)聯(lián)
    
    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })
    
    //5.啟動(dòng)路由
    
    router.start(App,'#box');
  </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vue中的scoped坑點(diǎn)解說(shuō)
這篇文章主要介紹了基于vue中的scoped坑點(diǎn)解說(shuō)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <，在引入第三方依賴(lài)的 JS 文件時(shí)，遇到的一個(gè)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-05-05
基于vue的換膚功能的示例代碼
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題
這篇文章主要介紹了解決vue請(qǐng)求接口第一次成功,第二次失敗問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue解讀之響應(yīng)式原理源碼剖析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-10-10
Vue自定義指令寫(xiě)法與個(gè)人理解
VUE指令是什么,VUE自定義指令又是什么,下面就和大家分享一下個(gè)人對(duì)它們的理解
2019-02-02
vue3使用ref獲取dom結(jié)果為'null'的原因詳析
這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個(gè)非常重要的功能,它可以用來(lái)獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對(duì)DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下
2023-07-07
vue混入mixin的介紹及理解
混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
2022-08-08
學(xué)習(xí)vue.js中class與style綁定
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12