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变化为.htm

张小囧！冲呀！

2664人浏览 · 2020-05-31 17:22:40

张小囧！冲呀！ · 2020-05-31 17:22:40 发布

动态路由参数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后

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^