资讯专栏INFORMATION COLUMN

石头理解的vue-router(一)

Sourcelink / 2875人阅读

摘要:基础安装路由功能作用,使用定义组件与路由的映射。定义渲染组件的位置。作用定义注意动态路由的动态部分改变时原来的组件会被复用,这样就不会触发生命周期钩子函数。嵌套路由命名视图命名路由别名重定向将设置为组件属性命名路由就是给路由起个名字。

vue-router 基础 install

CDN

$route & $router

this.$route // 路由记录
this.$router // 路由实例

动态路由

用处: 在使用“动态路由参数”时会用到动态路由。
作用:

定义: router file

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

注意: 动态路由的动态部分改变时原来的组件会被复用,这样就不会触发生命周期钩子函数。若要触发请使用watch $route或beforeRouteUpdate

使用: user file

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

(待续)

优先级

越先定义优先级越高。

嵌套路由&命名视图

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. 函数模式 方便做更多的操作
HTML5 History模式

(待续)

vue服务端渲染文档

(待续)

2018.07.26 by stone

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96293.html

相关文章

  • 石头理解set

    摘要:对对象进行遍历操作。对象没有提供访问指定值的方法。所以石头一般使用对象存放对象,然后检查是否有某个值,使用数组取数据。返回是否删除指定的对象。比如无法准确地取出指定的值。应该是做为一个数组对象的补充存在。 Set set类似数组。其成员的值都是唯一的。 数组去重 const set = new Set([1,2,3,2,4,2,3,4]) console.log(set) [......

    shinezejian 评论0 收藏0
  • Leetcode PHP题解--D64 292. Nim Game

    摘要:拿到最后一颗石头的一方为剩方。现给定一个石头数量,判断你最终是否能取得胜利。对方全拿,对方赢。因此,必输无疑。当剩下的石头为的整数倍双方都采取最优策略时,先下手的一方为输家。因此这个题目就很简单了,只要判断给定的数字是否是的整数倍即可。 D64 292. Nim Game 题目链接 292. Nim Game 题目分析 假设你和朋友玩一个捡石头的游戏,你和朋友轮流拿1~3颗石头。拿到最...

    XGBCCC 评论0 收藏0
  • 每日题: 石头 ----- 这里注重算法和效率

    摘要:比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从到的数字,每一个石头都应该分配一个唯一的数字,从到。所以我们要改进一下算法。 比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从0到9的数字,每一个石头都应该分配一个唯一的数字,从1到N。如果每个标签的成本是1...

    tigerZH 评论0 收藏0
  • 每日题: 石头 ----- 这里注重算法和效率

    摘要:比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从到的数字,每一个石头都应该分配一个唯一的数字,从到。所以我们要改进一下算法。 比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从0到9的数字,每一个石头都应该分配一个唯一的数字,从1到N。如果每个标签的成本是1...

    wind3110991 评论0 收藏0
  • 每日题: 石头 ----- 这里注重算法和效率

    摘要:比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从到的数字,每一个石头都应该分配一个唯一的数字,从到。所以我们要改进一下算法。 比较无聊的一天,小明决定列举了一大堆石头。他先数了数石头,发现堆里有几块石头,然后到商店去买标签。每一个标签都是从0到9的数字,每一个石头都应该分配一个唯一的数字,从1到N。如果每个标签的成本是1...

    frolc 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<