029_vue动态路由匹配

最新推荐文章于 2024-07-10 19:01:41 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-07-10 19:01:41 发布

阅读量351

点赞数

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/aihiao/article/details/122900506

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1. 下面3个路由链接

<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>

2. 动态匹配路由的基本用法

2.1. 通过动态路由参数的模式进行路由匹配。

2.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态路由匹配1</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user/1">User1</router-link>
	      	<router-link to="/user/2">User2</router-link>
	      	<router-link to="/user/3">User3</router-link>
	      	<router-link to="/register">Register</router-link>

      		<!-- 路由占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			// 路由组件中通过$route.params获取路由参数
			var user = {
	        	template: '<h1>User组件 -- 用户id为: {{$route.params.id}}</h1>'
	      	};

	      	var register = {
	        	template: '<h1>Register组件</h1>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		routes: [
        			{ path: '/', redirect: '/user/1' },
        			// 动态路径参数, 以冒号开头
          			{ path: '/user/:id', component: user },
          			{ path: '/register', component: register }
        		]
     		});

			var vm = new Vue({
				el: "#app",
        		router: router
			});
		</script>
	</body>
</html>

2.3. 效果图

3. 路由组件传递参数

3.1. $route与对应路由形式高度耦合, 不够灵活, 所以可以使用props将组件和路由解耦。

3.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态路由匹配2</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user/1">User1</router-link>
	      	<router-link to="/user/2">User2</router-link>
	      	<router-link to="/user/3">User3</router-link>
	      	<router-link to="/register">Register</router-link>

      		<!-- 路由占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			var user = {
				// 通过props接收路由参数
				props: ['id'],
				// 直接使用路由参数
	        	template: '<h1>User组件 -- 用户id为: {{id}}</h1>'
	      	};

	      	var register = {
	        	template: '<h1>Register组件</h1>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		routes: [
        			{ path: '/', redirect: '/user/1' },
        			// 如果props被设置为true, route.params将会被设置为组件属性
          			{ path: '/user/:id', component: user, props: true },
          			{ path: '/register', component: register }
        		]
     		});

			var vm = new Vue({
				el: "#app",
        		router: router
			});
		</script>
	</body>
</html>

3.3. 效果图

4. 路由组件传递参数props对象类型

4.1. 如果props是一个对象, 它会被按原样设置为组件属性。

4.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态路由匹配3</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user/1">User1</router-link>
	      	<router-link to="/user/2">User2</router-link>
	      	<router-link to="/user/3">User3</router-link>
	      	<router-link to="/register">Register</router-link>

      		<!-- 路由占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			var user = {
				props: ['uname', 'age'],
	        	template: '<h1>User组件 -- 用户id为: {{$route.params.id}} -- 姓名为: {{uname}} -- 年龄为: {{age}}</h1>'
	      	};

	      	var register = {
	        	template: '<h1>Register组件</h1>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		routes: [
        			{ path: '/', redirect: '/user/1' },
        			// 如果props是一个对象, 它会被按原样设置为组件属性
          			{ path: '/user/:id', component: user, props: { uname: 'lisi', age: 20 } },
          			{ path: '/register', component: register }
        		]
     		});

			var vm = new Vue({
				el: "#app",
        		router: router
			});
		</script>
	</body>
</html>

4.3. 效果图

5. 路由组件传递参数props函数类型

5.1. 如果props是一个函数, 则这个函数接收route对象为自己的形参。

5.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动态路由匹配4</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user/1">User1</router-link>
	      	<router-link to="/user/2">User2</router-link>
	      	<router-link to="/user/3">User3</router-link>
	      	<router-link to="/register">Register</router-link>

      		<!-- 路由占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			var user = {
				props: ['id', 'uname', 'age'],
	        	template: '<h1>User组件 -- 用户id为: {{id}} -- 姓名为: {{uname}} -- 年龄为: {{age}}</h1>'
	      	};

	      	var register = {
	        	template: '<h1>Register组件</h1>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		routes: [
        			{ path: '/', redirect: '/user/1' },
        			// 如果props是一个函数, 则这个函数接收route对象为自己的形参
          			{ path: '/user/:id', component: user, props: route => ({ uname: 'zs', age: 20, id: route.params.id }) },
          			{ path: '/register', component: register }
        		]
     		});

			var vm = new Vue({
				el: "#app",
        		router: router
			});
		</script>
	</body>
</html>

5.3. 效果图