Vue 路由传参-使用query方式传递参数

2018-08-15

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../vue.js"></script>    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script></head><body><div id="app">    {{mes}}    <router-link to="/login?id=10">登录</router-link>    <router-link to="/register">注册</router-link>    <router-view></router-view></div></body><script>    var login = {        template: "<div>我是登录组件</div>",        created(){            console.log(this.$route);        }    };    var register = {        template: "<div>我是注册组件</div>",    };    var router = new VueRouter({        routes: [            {path: "/login", component: login},            {path: "/register", component: register}        ]    });    new Vue({        el: "#app",        data: {            mes: "hello Vue"        },        components: {            login,            register        },        router    });</script></html>
  
    

console.log(this.$route.query.id); 获取id的值10组件模板直接获取  多个参数可在路径后面直接添加                &

-                                                                                                -------------------------------------------第二种方式-----------------------------------------------

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../vue.js"></script>    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script></head><body><div id="app">    {{mes}}    <router-link to="/login/123/ls">登录</router-link>    <router-link to="/register">注册</router-link>    <router-view></router-view></div></body><script>    var login = {        template: "<div>我是登录组件</div>",        created(){            console.log(this.$route.params.id);
             console.log(this.$route.params.name);
        }    };    var register = {        template: "<div>我是注册组件</div>",    };    var router = new VueRouter({        routes: [            {path: "/login/:id/:name", component: login},            {path: "/register", component: register}        ]    });    new Vue({        el: "#app",        data: {            mes: "hello Vue"        },        components: {            login,            register        },        router    });</script></html>




原文地址：https://www.cnblogs.com/jiahaoJAVA/p/9484498.html
				


				
时间： 2024-08-01 07:06:57 

		


		


	

	
	

		


		
Vue   路由传参-使用query方式传递参数的相关文章


								

		

			

                Vue路由传参的几种方式
			

		

		

									

				原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)			

		

	

				

		

			

                vue路由传参query和params路由传参的区别？
			

		

		

									

				相同点:router文件index.js 都是利用name属性. params传递时: params接收时利用this.$route.param进行接受: query路由传参: query接受利用this.$route.query 而展示上params路由传参像Ajax中post传参方式: query路由传参像get传参 原文地址:https://www.cnblogs.com/manban/p/12012567.html			

		

	

				

		

			

                vue路由传参的三种基本方式
			

		

		

									

				现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) 方案一,需要对应路由配置如下:			

		

	

				

		

			

                vue 路由传参的三种基本模式
			

		

		

									

				路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$			

		

	

				

		

			

                详解vue 路由跳转四种方式 (带参数)
			

		

		

									

				详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1. 不带参数  <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name /			

		

	

				

		

			

                vue路由传参query和params的区别
			

		

		

									

				1.用法 A.query要用path来引入(用name来引入也可以),接收参数都是this.$route.query.name. B.params要用name来引入,接收参数都是this.$route.params.name. 2.效果 A.query类似于ajax中get传参,即在浏览器地址栏中显示参数. B.params则类似于post,即在浏览器地址栏中不显示参数. 3.个人建议 在路由传参上建议使用params,以隐藏参数,做好安全保密.			

		

	

				

		

			

                vue路由传参页面刷新参数丢失问题解决方案
			

		

		

									

				最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { //组件路径 path: '/admin', //			

		

	

				

		

			

                Vue路由传参及传参后刷新导致参数消失处理
			

		

		

									

				参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用 this.$router.push({name:'list', params:{i			

		

	

				

		

			

                vue路由传参问题
			

		

		

									

				路由传参 带参的方式 第一种方式 通过 params 带参 刷新页面消失 this.$router.push({name:'name', params:{id: id}}) 这种方式传递过去的参数 刷新后容易消失 第二种方式 通过 query 带参   刷新页面不消失 this.$router.push({name:'name', query :{id: id}}) 原文地址:https://www.cnblogs.com/chz1905/p/11731177.html