路由传参
<!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>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： JavaScript数组splice方法
- 下一篇： Java代码优化必看
