路由传参

创建时间：2018-01-15 投稿人：浏览次数：664

<!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>

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

上一篇： php获取数据库表中总记录行数并打印
下一篇：没有了

热门文章: php获取数据库表中总记录行...; 路由传参

最新文章: php获取数据库表中总记录行...; thinphp 导航栏访问