vue-router中动态路由参数params以及查询参数query的使用

最新推荐文章于 2024-04-15 11:12:07 发布

张小囧！冲呀！

最新推荐文章于 2024-04-15 11:12:07 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue javascript web

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106457978

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

动态路由参数params的使用。编码时需要变化的有：
(1) routes中的path,由path:'/user'变化为path:'/user/:id'
(2) router-link中, 由:to='{name:"userP"}'为:to='{name:"userP",params:{id:1}}'
(3) 点击router-link对应的文字后，url发生了变化，由.html/user 变化为 .html/user/1
查询参数query的使用。编码时需要变化的部分有
(1) router-link中，由:to='{name:"userQ"}'变化为:to='{name:"userQ",query:{userId:1}}'
(2) 点击router-link对应的文字后，url发生了变化，由.html/user 变化为 .html/user?userId=1
代码

<head>
		<meta charset='utf-8'>
		<title>vue-router动态路由参数params和查询参数query的使用</title>
	</head>
	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
		<script type='text/javascript'>
		let UserP = {
			template:`
				<div>我是动态路由参数params</div>
			`
		}

		let UserQ = {
			template:`
				<div>我是查询参数query</div>
			`
		}


		let router = new VueRouter({
			routes:[
				{
					name:'userP',
					path:'/user/:id',
					component:UserP
				},
				{
					name:'userQ',
					path:'/user',
					component:UserQ
				}
			]
		})



		let App = {
			template:`
				<div>
					<router-link :to='{name:"userP",params:{id:1}}'>params</router-link>
					<router-link :to='{name:"userQ",query:{userId:1}}'>query</router-link>
					<router-view></router-view>
				</div>
			`,
			// 有输出，因为App组件作为Vue实例化对象中的一个子组件
			created:function() {
				console.log(this.$router)
				console.log(this.$route)
			}
		}

		let vm = new Vue({
			el:'#app',
			router,
			components:{
				App
			},
			template:`
				<App/>
			`,
			created:function() {
				console.log(this.$router)
				console.log(this.$route)
			}
		})	
		</script>
	</body>
</html>

结果：
（1）点击params后
在这里插入图片描述
（2）点击query后

张小囧！冲呀！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-router中动态路由参数params以及查询参数query的使用

动态路由参数params的使用。编码时需要变化的有：(1) routes中的path,由path:'/user'变化为path:'/user/:id'(2) router-link中, 由:to='{name:"userP"}'为:to='{name:"userP",params:{id:1}}'(3) 点击router-link对应的文字后，url发生了变化，由.html/user 变化为 .html/user/1查询参数query的使用。编码时需要变化的部分有(1) router-lin.
复制链接

扫一扫