路由传参

最新推荐文章于 2023-10-21 09:51:32 发布

spfLinux

最新推荐文章于 2023-10-21 09:51:32 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签：路由传参

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="example">
		<router-view></router-view>
	</div>
	<script type="text/javascript">
		var List=Vue.component('list-component',{
			data:function(){
				return {pList:[100,200,300]}
			},
			methods:{
				jump(myIdex){
					this.$router.push('/myDetail/'+myIdex); //发送
				}
			},
			template:`
				<ul>
					<li v-for="(tmp,index) in pList">
						<button @click="jump(index)">{{tmp}}</button>
					</li>
				</ul>
			`
		});

		var Detail=Vue.component('detail-component',{
			data:function(){
				return {myId:""}
			},
			created:function(){
				this.myId=this.$route.params.id; //接收
			},
			template:`
				<h1>这是详情页{{myId}}</h1>
			`
		});

		var NotFound=Vue.component('not-found',{
			template:`
				<h1>404 page not found</h1>
			`
		});

		const myRoutes=[
			{path:'',component:List},
			{path:'/myList/',component:List},
			{path:'/myDetail/:id',component:Detail},
			{path:'*',component:NotFound}
		];

		const myRouter=new VueRouter({
			routes:myRoutes
		});

		new Vue({
			el:'#example',
			router:myRouter
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="example">
		<router-view></router-view>
	</div>

	<script type="text/javascript">
		var Check=Vue.component('check-component',{
			data:function(){
				return {price:300}
			},
			methods:{
				toPay(){
					this.$router.push('/pay/'+this.price);
				}
			},
			template:`
				<div>
					<h1>商品支付页面</h1>
					<button @click="toPay">去支付</button>
					<router-link :to="'/pay/'+price">去支付</router-link>
				</div>
			`
		});

		var Pay=Vue.component('pay-component',{
			data:function(){
				return {price:""}
			},
			created:function(){
				this.price=this.$route.params.price;
			},
			template:`
				<div>
					<h1>商品查看页面</h1>
					<h1>{{price}}</h1>
					<router-link to="/send">去Send</router-link>
				</div>
			`
		});

		var Send=Vue.component('send-component',{
			methods:{
				toCheck(){
					this.$router.push('/check');
				}
			},
			template:`
				<div>
					<h1>商品发货页面</h1>
					<button @click="toCheck">返回Check</button>
				</div>
			`
		});

		var NotFound=Vue.component('not-found',{
			template:`
				<h1>404 page not found</h1>
			`
		});

		/*const myRoutes=[

			{path:'/check',component:Check},
			{path:'/pay/:price',component:Pay},
			{path:'/send',component:Send}
		];

		const myRouter=new VueRouter({
			routes:myRoutes
		});*/

		new Vue({
			el:'#example',
			//router:myRouter
			router:new VueRouter({
				routes:[
					{path:'',component:Check},
					{path:'/check',component:Check},
					{path:'/pay/:price',component:Pay},
					{path:'/send',component:Send},
					{path:'*',component:NotFound}
				]
			})
		})
	</script>
</body>
</html>