vue笔记之路由传参

1.使用query方式

<div id="app">
	<!-- 如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性 -->
	<router-link to="/login?id=10&name=zs" tag="span">登录</router-link>
	<router-link to="/register">注册</router-link>
	<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来路由规则匹配到的组件就会展示到router-view -->
	<router-view></router-view>
</div>
<script>
	//组件模版对象
	var login = {
		template:"<h1>登录组件----{{$route.query.id}}---{{$route.query.name}}</h1>",
		created () {
			//组件的生命周期钩子函数
			// console.log(this.$route)
			console.log(this.$route.query.id)
		}
	}
	var register = {
		template:"<h1>注册组件</h1>"
	}
	//创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做VueRouter
	//在new路由对象的时候，可以为构造函数，传递一个配置对象
	var routerObj = new VueRouter({
		//route //这个配置对象中的router表示路由匹配
		routes:[//路由匹配规则
			//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性；
			//属性1是path，表示监听哪个路由链接地址
			//属性2是component，表示如果路由是前面匹配到的path，则表示component属性对应的那个组件
			//component的属性值，必须是一个组件的模版对象，不能是组件的引用名称
			// {path:'/',component:login},
			//{path:'/',redirect:'/login'},//这里的redirect和node中的redirect完全是两码事
			{path:'/login',component:login},
			{path:'/register',component:register}
		]
	})
	var vm = new Vue ({
		el:'#app',
		data:{},
		methods: {},
		router:routerObj,//将路由规则对象注册到vm实例上，用来监听url地址的变化，然后展示对应的组件
		filters:{},//私有过滤器
		directives:{},//私有指令
		// 生命周期
		beforeCreate(){},
		created(){},
		beforeMount(){},
		mounted(){},
		beforeUpdate(){},
		updated() {},
		beforeDestroy(){},
		destroyed(){}
	});
		
	</script>

2.使用params

<div id="app">
	<!-- 如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性 -->
	<router-link to="/login/12/ls" tag="span">登录</router-link>
	<router-link to="/register">注册</router-link>
	<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来路由规则匹配到的组件就会展示到router-view -->
		
	<router-view></router-view>
		
</div>
<script>
		//组件模版对象
		var login = {
			template:"<h1>登录组件----{{$route.params.id}}---{{$route.params.name}}</h1>",
			data(){
				return {
					msg:1123
				}
			}, 
			created () {
				//组件的生命周期钩子函数
				console.log(this.$route)
				console.log(this.$route.query.id)
			}
		}
		var register = {
			template:"<h1>注册组件</h1>"
		}
		//创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做VueRouter
		//在new路由对象的时候，可以为构造函数，传递一个配置对象
		var routerObj = new VueRouter({
			//route //这个配置对象中的router表示路由匹配
			routes:[//路由匹配规则
				//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性；
				//属性1是path，表示监听哪个路由链接地址
				//属性2是component，表示如果路由是前面匹配到的path，则表示component属性对应的那个组件
				//component的属性值，必须是一个组件的模版对象，不能是组件的引用名称
				// {path:'/',component:login},
				//{path:'/',redirect:'/login'},//这里的redirect和node中的redirect完全是两码事
				{path:'/login/:id/:name',component:login},
				{path:'/register',component:register}
			],
			linkActiveClass:'active'
		})
		var vm = new Vue ({
			el:'#app',
			data:{},
			methods: {
				
			},
			router:routerObj,//将路由规则对象注册到vm实例上，用来监听url地址的变化，然后展示对应的组件
			filters:{},//私有过滤器
			directives:{},//私有指令
			
			// 生命周期
			beforeCreate(){},
			created(){},
			beforeMount(){},
			mounted(){},
			beforeUpdate(){},
			updated() {},
			beforeDestroy(){},
			destroyed(){}

		});
		
	</script>