Vue中路由使用params传递参数

最新推荐文章于 2024-06-13 22:00:00 发布
最新推荐文章于 2024-06-13 22:00:00 发布
阅读量762 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45616246/article/details/105605743
版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由中使用params传递参数</title>
    <script src="../../vue/vue-v2.6.11.js"></script>
    <script src="../../vue/vue-router-v3.1.6.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/login/12/ls">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
</body>
<script>
    var login = {
        template: '<h3>登录 --- {{$route.params.id}} --- {{$route.params.name}}</h3>',
        created() {
            console.log(this.$route.params.id);
        }
    };

    var register = {
        template: '<h3>注册</h3>'
    };
    var routerObj = new VueRouter({
        routes: [
            {path: '/login/:id/:name', component: login},
            {path: '/register', component: register}
        ]
    });
    var vm = new Vue({
        el: '#app',
        router: routerObj
    });
</script>
</html>
键盘的打工仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 路由传参及接收参数
Bule_daze的博客
01-03 1万+
???? 方法一：params 传参 this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 n...
Vue路由传参query传参以及params传参
m0_65262198的博客
04-07 1019
路由传参 1.字符串形式 query传参 this.$router.push("/search"+"?k="+this.keyword) params传参需要在路径后占位 this.$router.push("/search/"+ this.keyword） 2.模板字符串 query传参 this.$router.push(`/search?k=${this.keyword}`) params传参 this.$router.push(`/search/${this...
vue 路由传参params和query
烎烎的博客
04-06 697
大家都知道vue的路由传参有两种query和params，但是前面的是用name还是用path，也许大家容易记混了，今天来帮大家梳理下 1：首先看来query 1.1： path: <li @click="goHrefQuery('/index2')">子组件index2</li> goHrefQuery(pageIndex){ this.$ro...
vue 路由 params参数 传参
MCCLS的博客
07-30 5065
要点： 与Ajax同理 然后要在路由的配置写入占位符，写入的占位符就是在对应路由组件的$route里的params里的key的值 这边要用name 注意使用params的时候,这边配置里不允许写path,path是在query中的 总结 ...
Vue3【二十三】Vue 路由模式 用params给组件传参
最新发布
Ggome的博客
06-13 835
Vue3【二十三】Vue 路由模式 用params给组件传参只能使用名称路由需要在路由中提前指定参数占位？代表可选项。
路由传递params参数（vue）
richest_qi的博客
05-20 7145
文章目录嵌套路由的实现模板文件index.html入口文件main.jsApp.vue（App组件）Header.vue（Header组件）router/index.js（路由规则文件）About.vue（About组件）Home.vue（Home组件）News.vue（News组件）Message.vue（Message组件）路由传递params参数万事俱备router/index.js（路由规则文件）Detail.vue（Detail组件）Message.vue（Message组件）东风来了router
[vue] 路由的params参数
qq_14993591的博客
11-14 2095
配置路由，声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail }.
关于路由params传参一些问题的整理
WangdedoudouV587的博客
07-29 3818
关于路由params传参一些问题的整理
Vue路由传参详解（params 与 query）
热门推荐
m0_46217225的博客
08-19 2万+
Vue路由传参详解（params 与 query） 前言： 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。 query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用
vue路由传参 query传参 param参数传递
weibaobao1314的博客
08-13 692
路由传参 1、单页面应用 app 所有的内容都在一个html页面上显示，内容的切换用路由去实现 多页面应用 由多个html页面组成，页面的之间的转换由a标签实现跳转 单页面应用和多页面应用的优缺点： 单页面应用：首屏加载慢 但是跳转流畅 多页面应用：首屏加载快 但是跳转慢 路由的原理 路由分为Hash路由和History路由 Hash路由的特点根据hash值的切换显示不同的内容 原生js中有一个事件onhashchange()当hash值发生改变的时候会触发该事件 vue的路由 src
详解vue嵌套路由-params传递参数
08-30
详解 Vue 嵌套路由-params 传递参数 在 Vue 中，嵌套路由是一种非常有用的功能，它允许我们在父路由中传递参数给子路由。今天，我们将详细介绍如何使用 params 传递参数在嵌套路由中。 什么是 params 在 Vue ...
Spring Boot/VUE中路由传递参数的实现代码
11-30
在开发Web应用时，路由参数的传递是必不可少的环节，特别是在使用现代前端框架如Vue.js和后端微服务框架如Spring Boot的情况下。本篇将详细阐述这两种技术如何处理路由参数的传递。 首先，我们来看看Spring Boot...
vue中路由参数传递可能会遇到的坑
08-28
"Vue中路由参数传递可能...在 Vue 中路由参数传递需要注意使用路由名称来调用路由，而不是使用 `path`。否则，可能会遇到参数传递失败的坑。通过了解这些坑，我们可以更好地使用 Vue 的路由机制，提高开发效率和质量。
vue 中 params 参数的使用 及 可有可无时 做法
weixin_45814462的博客
06-20 1112
vue 中params参数的使用及可有可无时做法
Vue 深入学习param和query两种传参方式及其区别
前端菜菜DayDayUp的博客
09-30 6049
router文件下index.js里面，是这么定义路由的： { path:"/detail", name:"detail", component:home } 1、传参方式 query传参方式：query要用path来引入路由； this.$router.push({ path: "/detail", query: {code:"123"} }) param传参方式：param要用name来引入路由； this.$ro...
vue-router--路由传参--param传参
qq_43470725的博客
06-19 3161
vue-router
vue路由传参
H-rosy的博客
09-12 4039
今天介绍路由传递参数的方式。首先要明白路由跳转的两种方式一种是声明式导航另一种是编程式导航。主要介绍router-link和this.$router.push()
params详解
qwbtc的博客
04-13 1万+
或 以上二者相同，因为堆跌之后遇见最后一个参数（content或photo）相同时第一个参数自曾([]) params中存储的格式相当与 params = {"utf-8"=>"✓", "body" => [{"te
参数传递操作：param
kevin
10-02 1776
参数传递操作param用于传送参数，语法如下： 参数传递操作元素是用来提供name/value的值。与其他标准操作元素如:、等一起搭配使用。
vue3中路由传递参数
04-04
在Vue3中，可以使用params或query来传递路由参数。 1. 使用params传递参数 在路由配置中，需要定义路由参数的名称。例如： ```javascript const routes = [ { path: '/user/:id', name: 'user', component: User } ] ``` 在组件中，可以通过$route.params来获取路由参数。例如： ```javascript export default { mounted() { console.log(this.$route.params.id) } } ``` 在使用router-link跳转时，可以通过to属性传递参数。例如： ```html <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> ``` 2. 使用query传递参数 在路由配置中，不需要定义路由参数的名称。例如： ```javascript const routes = [ { path: '/user', name: 'user', component: User } ] ``` 在组件中，可以通过$route.query来获取路由参数。例如： ```javascript export default { mounted() { console.log(this.$route.query.id) } } ``` 在使用router-link跳转时，可以通过to属性传递参数。例如： ```html <router-link :to="{ name: 'user', query: { id: 123 }}">User</router-link> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值