vue-router單頁面路由

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

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

vue中，有一個(gè)類庫叫做vue-router，是用來做單頁面路由的。做路由一般分為四個(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)容頁</h3>'
    });
    
    var News=Vue.extend({
      template:'<h3>我是第二個(gè)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.啟動(dòng)路由
    
    router.start(App,'#box');
  </script>
</html>

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

您可能感興趣的文章:

相關(guān)文章

ElementPlus表格中的背景透明解決方案
最近寫大屏,用到elementplus中的el-table,為了讓顯示效果好看一點(diǎn),需要把表格的白色背景調(diào)整為透明,與整個(gè)背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧
2023-10-10
vue做移動(dòng)端適配最佳解決方案(親測(cè)有效)
這篇文章主要介紹了vue做移動(dòng)端適配最佳解決方案(親測(cè)有效)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-12-12
vue3之Suspense加載異步數(shù)據(jù)的使用
本文主要介紹了vue3之Suspense加載異步數(shù)據(jù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue自定義指令中無法獲取this的問題及解決
這篇文章主要介紹了Vue自定義指令中無法獲取this的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue中img的src屬性綁定與static文件夾實(shí)例
本篇文章中主要介紹了Vue中img的src屬性綁定與static文件夾實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-05-05
基于vue的fullpage.js單頁滾動(dòng)插件
這篇文章主要為大家詳細(xì)介紹了基于vue的fullpage.js單頁滾動(dòng)插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue多環(huán)境配置之 .env配置文件詳解
.env文件是vue運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下
2023-03-03
基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法
這篇文章主要介紹了基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05