vue-router基础（二）动态路由匹配

柔光的暖阳◎ 2022-03-19 08:18 239阅读 0赞

我们有一个 `User` 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 `vue-router` 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果

const User = {
      template: '<div>User</div>'
    }
    
    const router = new VueRouter({
      routes: [
        // 动态路径参数 以冒号开头
        { path: '/user/:id', component: User }
      ]
    })

一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时，参数值会被设置到 `this.$route.params`，可以在每个组件内使用。于是，我们可以更新 `User` 的模板，输出当前用户的 ID：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <div id="app">
      <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/bar">/user/bar</router-link>
      </p>
      <router-view></router-view>
    </div>
    const User = {
      template: `<div>User {
       { $route.params.id }}</div>`
    }
    
    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User }
      ]
    })
    
    const app = new Vue({ router }).$mount('#app')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220319/ce340ded8f514c018ea1dbcd219d339e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

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

相关阅读

相关 IP路由__动态路由

.使用协议来查找网络并更新路由表的配置，就是动态路由。它比使用静态或默认路由方便，但它需要一定的路由器CPU处理时间和网络链接带宽。路由协议定义了路由器与相邻路由器通信时...

「爱情、让人受尽委屈。」/ 2024年04月20日 10:07/ 0 赞/ 121 阅读

相关动态路由匹配

多内容:[https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html][https_router.vu...

「爱情、让人受尽委屈。」/ 2024年04月18日 08:23/ 0 赞/ 68 阅读

相关 VueRouter路由嵌套

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

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 119 阅读

相关 VueRouter路由传参

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

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 127 阅读

相关 Vuerouter路由

1. 前/后端路由 1. 后端路由 1. 一个url（uniform resource location）对应一个页面 2. 在页面地址跳转时，后台会根据url

梦里梦外;/ 2023年03月04日 09:17/ 0 赞/ 28 阅读

相关 vue-router 动态路由匹配

目录 1. 动态匹配路由的基本用法 2. 路由组件传递参数 2.1 props 的值为布尔类型 2.2 props 的值为对象类型

àì夳堔傛蜴生んèń/ 2022年12月26日 08:24/ 0 赞/ 125 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 430 阅读

相关动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果动态路径参数，以冒号开头看个

秒速五厘米/ 2022年05月19日 01:36/ 0 赞/ 264 阅读

相关 vue-router基础（二）动态路由匹配

我们有一个 `User` 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 `vue-router` 的路由路径中使用“动态路径参数”(dynam

柔光的暖阳◎/ 2022年03月19日 08:18/ 0 赞/ 240 阅读

相关 vue-router入门（1）—— 基本路由，动态匹配路由，嵌套路由

本系列的第一章，按照惯例，介绍一下vue-router的设计初衷，我第一次接触到vue-router是通过vue-cli的全家桶，vue-router的设计之初是为了适应单

梦里梦外;/ 2021年09月16日 06:50/ 0 赞/ 588 阅读