vue-router 动态路由匹配

最新推荐文章于 2025-06-02 09:03:07 发布

原创最新推荐文章于 2025-06-02 09:03:07 发布 · 626 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

157 篇文章

订阅专栏

本文介绍如何在 Vue.js 应用中使用 Vue Router 实现动态路由，包括定义动态路径参数、通过 this.$router.push 方法进行页面跳转以及如何在组件中获取路由参数。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
        //动态路由
      path: '/HelloWorld2/:id',
      name: 'HelloWorld2',
      component: HelloWorld2,
    },
    {
      path: '/HelloWorld3',
      name: 'HelloWorld3',
      component: HelloWorld3,
    },
  ],
  mode: 'history'
});

methods:{
            handleRouter () {
                //实现跳转的方式2
                this.$router.push('/HelloWorld2/123');
           },
           showRouter (){
               console.log(this.$router);
               console.log(this.$router.push);
           }
        }

<!--显示参数-->
        {{$route.params.id}}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunlizhen

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-router 路由跳转、带参动态路由匹配、404路由和嵌套路由

g841805的博客

03-19

1538

核心代码全部代码常量路由home.vueabout.vueabout1.vue效果homeaboutabout1404。

vue-router 源码分析——3. 动态路由匹配

miyagiSimple的博客

06-06

1043

这是对vue-router 3 版本的源码分析。本章讲解router中动态路由匹配是如何实现的。动态路由匹配，path-to-regexp，匹配优先级。

参与评论您还未登录，请先登录后发表或查看评论

Vue路由篇之动态路由匹配

tianlei11的博客

04-07

1146

Vue路由篇之动态路由匹配详情请见注释 <style> .active{ font-size: 100px; color:red } </style> <div id="app"> <ul> <router-link tag='...

利用Vue 2路由传递Props：提升组件间数据交互的灵活性与效率

2302_76609856的博客

04-22

1154

在构建基于Vue 2的单页应用程序（SPA）时，Vue Router扮演着至关重要的角色，它负责管理应用的路由导航和页面间的切换。通过Props，我们可以保持组件的封装性和复用性，遵循单一职责原则，让每个组件专注于处理自己的数据和逻辑。而在Vue Router的上下文中，我们可以通过路由配置文件为特定路由所对应的组件设定Props，这些Props会在用户导航到该路由时自动注入到目标组件。这意味着，即使没有明确的父子组件关系，也能借助路由系统实现数据的传递，进一步扩展了Props的应用场景。

VueRouter动态路由匹配

ZuoSanLuoZuoWuQueZ的博客

02-03

274

VueRouter_动态路由匹配当我们需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果： const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // 动态路径参数以冒号

展示如何使用Vue Router实现动态路由匹配

有我更精彩的博客

07-10

1202

动态路由匹配指的是在定义路由时使用动态参数，这样可以匹配多个路径，而不需要为每一个可能的路径单独定义一个路由。/post/:id本文介绍了如何使用Vue Router实现动态路由匹配。通过动态路由，我们可以为单页应用提供灵活且强大的导航功能。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。

精选资源

vue3.x+vite+ts+vue-router@4.x 路由使用demo

07-24

7. **动态路由匹配**：通过冒号`:`定义动态段，实现基于参数的路由跳转。在组件内部，可以通过`route.params`访问这些参数。 8. **路由守卫**：Vue Router 提供了多种类型的导航守卫，如全局前置守卫、组件内守卫和...

详解vue-router 命名路由和命名视图

08-27

在 Vue-Router 中，我们可以给路由定义不同的名字，这样我们可以根据名字进行匹配。同时，我们也可以给不同的 router-view 定义名字，router-link 通过名字进行对应组件的渲染。这种机制使得我们的路由管理更加灵活...

Vue-Router动态路由匹配

aidie7178的博客

03-06

281

//重点在于路由出口 <p>    <router-link to="/...

【Vue Router】动态路由匹配

richest_qi的博客

07-13

801

文章目录新建项目并改造项目第一种：使用路由参数时的路由匹配第二种：使用 URL查询参数时的路由匹配新建项目并改造项目首先使用vue-cli新建一个项目。然后对该项目进行改造，改造后的目录如下。第一种：使用路由参数时的路由匹配 src\App.vue <template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link to=

vueRouter动态路由匹配

煮酒客的博客

03-05

356

vueRouter动态路由匹配动态路由匹配需要安装vue-router 在控制台选择安装的路径 npm init --yes npm install vue-router -S html代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met...

vue-router动态路由匹配

快乐学代码

05-08

419

1.动态路由匹配 1.2例子代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Vue Router--动态路由匹配

xiaoerduo123x的博客

12-04

1597

1.带参数的动态路由匹配很多时候，我们需要将给定的匹配模式的路由映射到同一个组件。 const routes = [ // 动态段以冒号开始 { path: '/users/:id', component: User }, ] 例如/users/zwl和/users/zwf这样的的URL都会映射到同一个路由。当一个路由被匹配时，它的params的值将在每个组件中通过this.$route.params的形式暴露出来。它也可以匹配多个参数 /users/:username/pos...

Vue Router 动态路由

qq_40930841的博客

04-30

6425

动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。

Vue Router 动态路由匹配技术详解