路由传参-蒲公英云

路由传参

末蓝、 2022-06-01 00:14 427阅读 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>