监听路由

最新推荐文章于 2023-08-08 09:21:30 发布

qq_38504352

最新推荐文章于 2023-08-08 09:21:30 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/qq_38504352/article/details/104293921

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
	</head>
	
	<style type="text/css">
		.component-enter,
		.component-leave-to{
			opacity:0;
			transform: translateX(50px);
		}
		.component-enter-active,
		.component-leave-active{
			transition:all 1s ease;
		}
	</style>
	<body>
		<!--
			以往的非前后端分离项目，如果需要id获取某条数据，在另一个页面去展示
			页面A点击，传递id给后端，后端查出，转发到页面B,页面B展示
			前后端分离项目
			页面A点击传递id给页面B，页面B在created中根据id将数据查出，接着在页面B展示
		-->
		<div id="app">	
			<!--只需要在url后用？去传参即可，不需要对路由进行任何修改-->
			<router-link to="/login?id=123&name=张三">登录</router-link>
			<router-link to="/register/1234/李四">注册</router-link>
			
			<transition name="component" mode="out-in">
				<!--这就是一个坑，专门作为一个占位符，当路由进行切换的时候，在路由中匹配对应的组件，就会展示在这个坑里-->
				<router-view></router-view>
			</transition>
		</div>
		
		<template id="login">
			<div>
				<p>我是登录组件</p>		
				<!--建议写法-->
				<router-link to="/login/passwordLogin" tag="button">密码登录</router-link>
				<router-view></router-view>
			</div>
		
		</template>
		<script type="text/javascript">
			var login={
				template:"#login"
			}
			var register={
				template:"<p>我是注册组件----{{$route.params.id}}--{{$route.params.name}}</p>"
				}
			var passwordLogin={
				template:"<p>密码登录</p>",
			}
			var smsLogin={
				template:"<p>验证码登录</p>",
			}
			//当引入vue-router以后，在window全局对象后，就有了VueRouter构造函数
			let routerObj=new VueRouter({
				routes:[//routes定义了路由的规则
					{path:'/',redirect:'/login'},
					{//对象中有两个属性，path:表示路由的url，component表示路由跳转的组件
						path:'/login',
						component:login,
						children:[//children属性用于指定子路由，通过子路由可以实现路由的嵌套
							{path:'passwordLogin',component:passwordLogin},
							{path:'smsLogin',component:smsLogin}
						]
					},
					{
						path:'/register/:id/:name',
						component:register
					}
				]
			})
			var vue =new Vue({
				el:"#app",
				data:{
					
				},
				//将路由绑定到vue实例中
				router:routerObj,
				watch:{
					'$route.fullPath':function(newVal,oldVal){
						console.log('用户路由跳转。url为：',newVal)
					}
				}
			})
			
		</script>
	</body>
</html>