vue-router 路由简记

- 日理万妓 2021-07-26 19:00 546阅读 0赞

前言

  1.  vue-router中路由一共分为两种
  • 编程式的导航router.push
  • 声明式的导航<router-link>

编程式导航

  1. this.$router.push("home");
  2. <!-- 命名路由这种方式传递的参数，如果在目标页面刷新是获取不到-->
  3. this.$router.push({  name: 'news', params: {  userId: 123 }})
  4. <!-- 获取参数 -->
  5. this.$route.params.userId
  7. <!-- 查询参数 -->
  8. this.$router.push({  path: '/news', query: {  userId: 123 }});
  9. this.$route.query.userId

注:命名路由搭配params，刷新页面参数会丢失

声明式导航

  1. <router-link to="news">click to news page</router-link>
  3. <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
  5. <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

发表评论

表情：
评论列表 （有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

    相关 IP路由__静态路由

    .静态路由的优缺点： 　　优点：对于路由器的CPU没有管理性开销，它意味着如果你不使用动态路由选择的话，你可能应该购买更为便宜的路由器。在路由器之间没有带宽占用，它意味...

    Dear 丶Dear 丶/ 0 赞/ 194 阅读

    相关 VueRouter路由嵌套

    1. 前言 本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

    怼烎@怼烎@/ 0 赞/ 222 阅读

    相关 VueRouter路由传参

    1. 前言 本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 207 阅读