欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router單頁面路由

 更新時間：2017年06月17日 15:52:40   作者：孫三峰  
這篇文章主要為大家詳細(xì)介紹了vue-router單頁面路由的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue中，有一個類庫叫做vue-router，是用來做單頁面路由的。做路由一般分為四個步驟：

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

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

關(guān)于路由跳轉(zhuǎ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'}">我是第一個a</a>
        </li>
        <li >
          <a v-link="{path:'news'}">我是第二個a</a>
        </li>
      </ul>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </body>
  <script>
    //1.準(zhǔn)備一個根組件
    var App=Vue.extend();
    
    //2.Home News 組件準(zhǔn)備
    var Home=Vue.extend({
      template:'<h3>我是第一個a的內(nèi)容頁</h3>'
    });
    
    var News=Vue.extend({
      template:'<h3>我是第二個a的內(nèi)容頁</h3>'
    })
    
    //3.準(zhǔn)備路由
    var router = new VueRouter();
    
    //4.關(guān)聯(lián)
    
    router.map({
      'home':{
        component:Home
      },
      'news':{
        component:News
      }
    })
    
    //5.啟動路由
    
    router.start(App,'#box');
  </script>
</html>

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

相關(guān)文章

  • 基于vue中的scoped坑點(diǎn)解說

    基于vue中的scoped坑點(diǎn)解說

    這篇文章主要介紹了基于vue中的scoped坑點(diǎn)解說，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue項目報錯：Uncaught SyntaxError: Unexpected token <

    Vue項目報錯：Uncaught SyntaxError: Unexpected token <

    這篇文章主要介紹了Vue項目報錯：Uncaught SyntaxError: Unexpected token <，在引入第三方依賴的 JS 文件時，遇到的一個問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

    詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定

    這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實(shí)用價值，需要的朋友可以參考下
    2017-05-05
  • 基于vue的換膚功能的示例代碼

    基于vue的換膚功能的示例代碼

    本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 解決vue請求接口第一次成功,第二次失敗問題

    解決vue請求接口第一次成功,第二次失敗問題

    這篇文章主要介紹了解決vue請求接口第一次成功,第二次失敗問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue解讀之響應(yīng)式原理源碼剖析

    Vue解讀之響應(yīng)式原理源碼剖析

    Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-10-10
  • Vue自定義指令寫法與個人理解

    Vue自定義指令寫法與個人理解

    VUE指令是什么,VUE自定義指令又是什么,下面就和大家分享一下個人對它們的理解
    2019-02-02
  • vue3使用ref獲取dom結(jié)果為'null'的原因詳析

    vue3使用ref獲取dom結(jié)果為'null'的原因詳析

    這篇文章主要給大家介紹了關(guān)于vue3使用ref獲取dom結(jié)果為'null'的原因詳析,ref是Vue3中一個非常重要的功能,它可以用來獲取DOM節(jié)點(diǎn),從而實(shí)現(xiàn)對DOM節(jié)點(diǎn)的操作,需要的朋友可以參考下
    2023-07-07
  • vue混入mixin的介紹及理解

    vue混入mixin的介紹及理解

    混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項
    2022-08-08
  • 學(xué)習(xí)vue.js中class與style綁定

    學(xué)習(xí)vue.js中class與style綁定

    這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12

最新評論