欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

vue學(xué)習(xí)之Vue-Router用法實(shí)例分析

本文實(shí)例講述了vue學(xué)習(xí)之Vue-Router用法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供溫泉網(wǎng)站建設(shè)、溫泉做網(wǎng)站、溫泉網(wǎng)站設(shè)計(jì)、溫泉網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、溫泉企業(yè)網(wǎng)站模板建站服務(wù)，10多年溫泉做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Vue-router就像一個(gè)路由器，將組件(components)映射到路由(routes)后，通過(guò)點(diǎn)擊<router-link>它可以在<router-view>中將相應(yīng)的組件渲染出來(lái)。

1、使用vue-router的步驟

  //1、創(chuàng)建路由組件
  const Link1={template:'#link1'};
  const Link2={template:'#link2'};
  const Link3={template:'#link3'};
  //2、定義路由映射
  const routes=[
    {
      path:'/link1',       //定義相對(duì)路徑
      component:Link1,      //定義頁(yè)面的組件
      children:[
        {
          path:'intro',      //子路由/link1/intro
          component:{template:'#ariesIntro'},
          name:'ariesIntro',    //為路由命名
        },
        {
          path:'feature',
          component:{template:'#ariesFeature'},
        },
        {path:'/',redirect:'intro'}
      ]
    },
    {path:'/link2',component:Link2},
    {path:'/link3',component:Link3},
    {path:'/',redirect:'/link1'}        //配置根路由，使其重定向到/link1
  ];
  //3、創(chuàng)建router實(shí)例
  const router = new VueRouter({
    routes                   //縮寫，相當(dāng)于 routes: routes
  });
  // 4、 創(chuàng)建和掛載根實(shí)例。
  const app = new Vue({
    router
  }).$mount('#app');              //掛載到id為app的div

注意：要設(shè)置根路由，頁(yè)面加載完成后默認(rèn)顯示根路由，否則將什么也不顯示。

在頁(yè)面中調(diào)用路由接口，<router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽，點(diǎn)擊后在<router-view>渲染指定模板

  <div class="col-lg-offset-2 col-lg-2">
    <!-- 使用 router-link 組件來(lái)導(dǎo)航. -->
    <!-- 通過(guò)傳入 `to` 屬性指定鏈接. -->
    <router-link class="list-group-item" :to="{name:'ariesIntro'}">白羊座</router-link>
    <router-link class="list-group-item" to="/link2">處女座</router-link>
    <router-link class="list-group-item" to="/link3">金牛座</router-link>
  </div>
  <div class="col-lg-6">
    <div class="panel">
      <div class="panel-body">
        <!-- 路由出口，路由匹配到的組件將渲染在這里 -->
        <router-view></router-view>
      </div>
    </div>
  </div>

2、嵌套路由

通過(guò)每個(gè)路由內(nèi)的children數(shù)組屬性可以為每個(gè)路由再配置子路由，子路由的路徑是基于父路由目錄下的，默認(rèn)路徑會(huì)進(jìn)行疊加。例如上面再link1中添加intro與feature兩個(gè)子路由，在link1模板中使用兩個(gè)子路由：

  <template id="link1">
    <div>
      <h4>白羊座</h4>
      <ul class="nav nav-tabs">
        <li class="active">
          <router-link to="/link1/intro">簡(jiǎn)介</router-link>
        </li>
        <li><router-link to="/link1/feature">特點(diǎn)</router-link></li>
      </ul>
      <div class="tab-content">
        <router-view></router-view>
      </div>
    </div>
  </template>

最終效果如圖：

vue學(xué)習(xí)之Vue-Router用法實(shí)例分析

3、動(dòng)態(tài)路由

在路由路徑中綁定變量，使其根據(jù)不同的變量值跳轉(zhuǎn)到不同頁(yè)面，例如將path:"goods/:goodsId"，假如當(dāng)goodsId為15時(shí)，就會(huì)路由到/goods/15頁(yè)面。

4、編程路由

通過(guò)js代碼控制路由頁(yè)面的跳轉(zhuǎn)與傳值。例如給button綁定事件jump，在methods內(nèi)實(shí)現(xiàn)：

jump(){
  this.$router.push('/cart?goodsId=123')
}

頁(yè)面跳轉(zhuǎn)到根下的cart目錄，并且傳遞參數(shù)goodsId，值為123。在cart頁(yè)面通過(guò)$route.query接收參數(shù)，直接在頁(yè)面內(nèi)使用：

注意：區(qū)分跳轉(zhuǎn)是$router，接收參數(shù)是$route

<span>商品ID：{{$route.query.goodsId}}</span>

也可以指定頁(yè)面向前向后跳轉(zhuǎn)：this.$router.go(2)，向前跳轉(zhuǎn)兩步 ，向后跳轉(zhuǎn)一步go(-1)。

5、命名路由

當(dāng)路由路徑過(guò)長(zhǎng)時(shí)，也可以用name屬性為路徑命名，在<router-link>中使用動(dòng)態(tài)綁定:to="{name:'路徑名'}"訪問(wèn)。例如白羊座的鏈接上使用 :to="{name:'ariesIntro'}"，可直接跳轉(zhuǎn)到link1下的Intro頁(yè)面。

還可以對(duì)視圖進(jìn)行命名，將組件渲染到指定視圖位置，例如在父組件中有一個(gè)默認(rèn)視圖與兩個(gè)命名視圖一左一右：  

<router-view></router-view>
<router-view class="left" name="cartview"></router-view>
<router-view class="right" name="imgview"></router-view>

在根路由中設(shè)置其組件components，將默認(rèn)視圖渲染為GoodsList，左邊cartview視圖渲染為Cart組件，右邊imgview渲染為Image組件：

new Router({
 routes: [
  {
   path: '/',
   components:{
    default:GoodsList,
    cartview:Cart,
    imgview:Image
   }
}

結(jié)果如下：

vue學(xué)習(xí)之Vue-Router用法實(shí)例分析

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

新聞名稱：vue學(xué)習(xí)之Vue-Router用法實(shí)例分析
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article30/gocpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、虛擬主機(jī)、小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

小程序開(kāi)發(fā)