成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

石頭理解的vue-router（一）

Sourcelink / 2975人閱讀

摘要：基礎安裝路由功能作用，使用定義組件與路由的映射。定義渲染組件的位置。作用定義注意動態(tài)路由的動態(tài)部分改變時原來的組件會被復用，這樣就不會觸發(fā)生命周期鉤子函數(shù)。嵌套路由命名視圖命名路由別名重定向將設置為組件屬性命名路由就是給路由起個名字。

vue-router 基礎 install

CDN

$route & $router

this.$route // 路由記錄
this.$router // 路由實例

動態(tài)路由

用處： 在使用“動態(tài)路由參數(shù)”時會用到動態(tài)路由。
作用：

定義： router file

{
    path: "/user/:id",
    component: "user"
}

注意： 動態(tài)路由的動態(tài)部分改變時原來的組件會被復用，這樣就不會觸發(fā)生命周期鉤子函數(shù)。若要觸發(fā)請使用watch $route或beforeRouteUpdate

使用： user file

this.$route.params.id
高級匹配模式

（待續(xù)）

優(yōu)先級

越先定義優(yōu)先級越高。

嵌套路由&命名視圖

router 
{
    path: "/user",
    name: "name", // 命名路由
    component: user,
    alias: "/roler", // 別名
    redirect: { name: "foo" }, // 重定向
    props: true // 將 this.$route.params 設置為組件屬性
}
命名路由

就是給路由起個名字。方便使用。

user

this.$router.push({ name: "user", params: { userId: 123 }})
重定向、別名。 路由組件傳參

定義路由： router file

{
  path: "routeUser/:userId",
  // components: {
  //   default: eleThree,
  //   second: eleSecond
  // },
  // props: {
  //   default: true,
  //   second: true
  // },
  component: routeUser,
  children: [
    {
      path: "/",
      components: {
        default: routeSecond,
        second: routeThree
      },
      props: {
        default: dynamicDate,
        second: true
      }
    }
  ],
  props: true
}

function dynamicDate (route) {
  console.log(route)
  const now = new Date()
  return {
    date: now.getFullYear()
  }
}

定義組件： routeUser file

userId: {{userId}}




props: ["userId"]
1. 布爾模式 將 this.$route.params 設置為組件屬性
2. 對象模式 按原樣設置為組件屬性
3. 函數(shù)模式 方便做更多的操作
HTML5 History模式

（待續(xù)）

vue服務端渲染文檔

（待續(xù)）

2018.07.26 by stone

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/96293.html

相關文章

  • 石頭理解的set

    摘要：對對象進行遍歷操作。對象沒有提供訪問指定值的方法。所以石頭一般使用對象存放對象，然后檢查是否有某個值，使用數(shù)組取數(shù)據(jù)。返回是否刪除指定的對象。比如無法準確地取出指定的值。應該是做為一個數(shù)組對象的補充存在。 Set set類似數(shù)組。其成員的值都是唯一的。 數(shù)組去重 const set = new Set([1,2,3,2,4,2,3,4]) console.log(set) [......

    shinezejian 評論0 收藏0

  • Leetcode PHP題解--D64 292. Nim Game

    摘要：拿到最后一顆石頭的一方為剩方。現(xiàn)給定一個石頭數(shù)量，判斷你最終是否能取得勝利。對方全拿，對方贏。因此，必輸無疑。當剩下的石頭為的整數(shù)倍雙方都采取最優(yōu)策略時，先下手的一方為輸家。因此這個題目就很簡單了，只要判斷給定的數(shù)字是否是的整數(shù)倍即可。 D64 292. Nim Game 題目鏈接 292. Nim Game 題目分析 假設你和朋友玩一個撿石頭的游戲，你和朋友輪流拿1~3顆石頭。拿到最...

    XGBCCC 評論0 收藏0

  • 每日一題:一 石頭 ----- 這里注重算法和效率

    摘要：比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從到的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從到。所以我們要改進一下算法。 比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從0到9的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從1到N。如果每個標簽的成本是1...

    tigerZH 評論0 收藏0

  • 每日一題:一 石頭 ----- 這里注重算法和效率

    摘要：比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從到的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從到。所以我們要改進一下算法。 比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從0到9的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從1到N。如果每個標簽的成本是1...

    wind3110991 評論0 收藏0

  • 每日一題:一 石頭 ----- 這里注重算法和效率

    摘要：比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從到的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從到。所以我們要改進一下算法。 比較無聊的一天，小明決定列舉了一大堆石頭。他先數(shù)了數(shù)石頭，發(fā)現(xiàn)堆里有幾塊石頭，然后到商店去買標簽。每一個標簽都是從0到9的數(shù)字，每一個石頭都應該分配一個唯一的數(shù)字，從1到N。如果每個標簽的成本是1...

    frolc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<