vue-router动态路由匹配

最新推荐文章于 2023-02-17 16:43:27 发布
最新推荐文章于 2023-02-17 16:43:27 发布
阅读量317 收藏
点赞数
分类专栏： vue vue路由 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51811318/article/details/116540159
版权

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">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link to="/user/3">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            template: `<div>
                User组件--用户的id是：{{$route.params.id}}
                </div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                { path: '/user/:id', component: User },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

2.路由组件传递参数

2.1传递布尔值

在这里插入图片描述

代码如下

<!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">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link to="/user/3">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id'],
            template: `<div>
                User组件--用户的id是：{{id}}
                </div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                { path: '/user/:id', component: User, props: true },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

2.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">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link to="/user/3">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id', 'uname', 'age'],
            template: `<div>
                User组件--用户的id是：{{uname}},{{age}},{{id}}
                </div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                { path: '/user/:id', component: User, props: { uname: 'zs', age: 12 } },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>

3.props的值为函数类型

在这里插入图片描述

代码如下

<!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">
    <title>Document</title>
    <!-- 导入js文件 -->
    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
</head>

<body>

    <div id="app">
        <!-- 2.添加路由连接 -->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">User</router-link>
        <router-link to="/user/3">User</router-link>
        <router-link to="/register">Register</router-link>
        <!--3.添加占位符  -->
        <!-- 路由填充位（也叫做路由占位符） -->
        <!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
        <router-view></router-view>
    </div>
    <script>
        var User = {
            props: ['id', 'uname', 'age'],
            template: `<div>
                User组件--用户的id是：{{uname}},{{age}},{{id}}
                </div>`
        }
        var Register = {
            template: `<div>Rgister组件</div>`
        }
        var router = new VueRouter({
            // router是路由规则数组

            routes: [
                // 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
                // path表示当前路由规则匹配的hash地址
                // component表示当前路由对应的展示的组件
                { path: '/', redirect: '/user' },
                {
                    path: '/user/:id', component: User, props: route => ({
                        uname: 'zs', age: 12, id: route.params.id
                    })
                },
                { path: '/register', component: Register },
            ]
        })
        new Vue({
            el: '#app',
            router
        })

    </script>
</body>

</html>
一个想走出去的码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue - vue动态路由匹配和路由懒加载
qq_43886365的博客
03-29 738
在日常开发中，有一个商品列表页面，点击每一项可以看到详情页面，且样式都是一样的，那样我们可以封装一个详情页面，路由为`/detail` 不同的数据 id或唯一标识可以路由写成 `/detail/id`，这样获取id值就可以请求不同的数据并展示了；
vue学习笔记（路由动态匹配和嵌套）
weixin_50310737的博客
01-19 474
route
动态路由：实际路径和路由参数路径匹配
weixin_43909743的博客
02-17 440
动态路由 路径
router---动态路由匹配
weixin_43390711的博客
07-31 292
router---动态路由匹配
动态路由匹配
冰雪为融的博客
07-18 1552
我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件，那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果 动态路径参数，以冒号开头 看个小示例 const router= new Router({ routes:[ { path:'/user/:tip?/:userId?', name:'User', com...
vue-router路由简单案例介绍
12-02
<router>是一个顶级的路由外链，用于渲染匹配的组件。 例如：我的应用入口是app.vue 那么在app.vue中添加如下代码， 此处涉及ES6。 app.vue <div class='page index-content'> <router-view class="view" ...
vue-router 控制路由权限的实现
01-18
2.1、路由匹配判断 // src/router.js import Vue from 'vue'; import Store from '@/store'; import Router from 'vue-router'; import Cookie from 'js-cookie'; const routers = new Router({ base : /test, /...
vue实现权限控制路由(vue-router 动态添加路由)
12-13
二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。 三、通过匹配，把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空，这里...
详解vue-router 动态路由下子页面多页共活的解决方案
11-29
我们都知道 vue-router 的动态路由匹配 对组件是原地复用的策略，需要我们在组件中根据不同的 $route 参数展示不同的数据，这在大部分情景下是很高效的做法，但这无疑增加了组件的复杂度，而且不同参数间切换因为是...
详解vue-router2.0动态路由获取参数
01-19
一下demo演示2.0中的vue-router是如何获取到不同参数的，并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title>...
Vue-动态路由匹配
世界和我们都不该止步于此
05-13 1040
目录 动态路由匹配操作 方法1：在Vue实例中逐层寻找 方法2：当前路由规则开启props传参，拿到动态参数值 动态路由匹配可以提高路由规则的复用性 什么意思呢？ 假如我们有很多的商品展示，每一个商品都需要有对应的详情展示页 难道我们要写上万个甚至更多的路由规则吗？ <!-- 假如现在有四个商品 --> <router-link to="/Move/1">商品1</router-link> <router-link to="/Move/2"&gt.
Vue 中路由传参（动态路由匹配）
Tianxiaoxixi的博客
07-04 1213
Vue 中路由传参（动态路由匹配）
vue 配置路由 + 用户权限生成动态路由 踩过的那些坑
热门推荐
羽下佳人的博客
09-12 10万+
整个动态路由的设置是我自己研究写的，现在项目中没发现什么问题。如发现有问题，欢迎前来纠正，谢谢！！! 链接：https://pan.baidu.com/s/1J9R2TkqJk0H9JMjqp2WcFw 提取码：n4rk 复制这段内容后打开百度网盘手机App，操作更方便哦 此包因为涉及后台交互未写成mock形式，下载后不可本地运行。node_modules需要自己本地安装。 可以参考项目...
Vue-router 学习之路 二 路由匹配
Romky的博客
11-22 617
vue-route 的跳转，使用push，监听，以及使用
构建vue-router知识体系(三)动态路由基本匹配、简易的 router 实现
发果叁
08-29 712
很多时候我们需要将给定匹配模式的路由映射到同一个组件： 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的 ID 是不同的；在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；router-link 跳转。...
VUE-路由详解
damadashen的博客
05-14 2435
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
nodejs开发Vue自动化路由的包vue-router-automation，实现任意文件夹下.vue文件自动匹配生成路由，以及路由自定义meta
薛定谔的猫的博客
10-26 690
npm 账号注册完成后，可以在终端中执行 npm login 命令，依次输入用户名、密码、邮箱后，即可登录成功。(1)访问 https://www.npmjs.com/ 网站，点击 sign up 按钮，进入注册用户界面。在包的根目录运行终端，运行 npm publish 命令，即可将包发布到 npm上；实现vue路由自动化的具体流程，参考博主的另一篇文章，下面是文章链接；开发npm包，首先需要对自己要开发的包名进行查重，否则会上传失败；(4)登录邮箱，点击验证链接，进行账号的验证。
vue-router -- 动态路由匹配
骑着毛驴的小猴子
09-07 7707
一、概述 使用场景： 根据商品的id返回指定商品的详情页 匹配规则 模式 匹配路径 $route.params /user/:username /user/Jack {username=’Jack’} /user/:username/post/:post_id /user/Jack/post/123 {username=’Jack’,post_id=’123’} 二
vue-router动态路由
最新发布
04-05
Vue-router动态路由是指在路由配置中可以动态的传入参数，根据参数的不同来显示不同的页面内容。常用的应用场景是在列表页点击某个选项，进入详情页时需要传入对应的参数来获取对应的数据。 动态路由可以通过在路由...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值