vue路由+子路由+具名路由demo实例(结合animate.css动画)

来源：互联网发布：邵阳学院网络教学平台编辑：程序博客网时间：2024/06/11 07:41
直接把代码copy下来自己运行吧

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>子路由</title>    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>    <script src="https://cdn.bootcss.com/vue-router/2.5.3/vue-router.js"></script>    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">    <style type="text/css">        html,body{overflow: hidden;}    </style></head><body>    <div id="box">        <p>            <router-link to="/">首页</router-link>            <router-link :to="{name:'list'}">列表</router-link>        </p>        <router-view name="shit"></router-view>        <router-view></router-view>    </div>    <template id="index">        <div>            <h1>首页</h1>            <img src="http://t.cn/RaspUOe" width="200">        </div>    </template>    <template id="list">        <div>            <p>                <router-link                     v-for="item in items"                     :key="item.id"                     :to="{name:'list.rp',params:{rp:item.url}}">                        {{item.text}}                </router-link>            </p>            <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutLeft">                <router-view name="shit2"></router-view>            </transition>            <router-view></router-view>        </div>    </template>    <template id="detail">        <div v-show="isShow">            <!-- <p>{{$route.params.rp}}</p> -->                <img :src="$route.params.rp" width="100%">        </div>    </template>    <template id="footer">        <h3>i am footer</h3>    </template>    <script type="text/javascript">        const Index = {            template:"#index"        }        const List = {            template:"#list",            data(){                return{                    items:[                        {                            text:'美女',                            url:'http://t.cn/RajyIIE',                        },                        {                            text:'野兽',                            url:'http://t.cn/RasDspD',                        },                        {                            text:'性感',                            url:'http://t.cn/Rask2ST'                        }                    ]                }            }        }        const Detail = {            template:"#detail",            data(){                return{                    isShow:false                }            },            mounted(){                this.isShow = true            }        }        const Footer = {            template:"#footer"        }        let router = new VueRouter({            routes:[                {                    path:'/',                    components:{                        shit:Index,                        default:List                    }                },                {                    path:'/list',                    name:'list',                    component:List,                    'children':[                        {                            path:':rp',                            name:'list.rp',                            components:{                                shit2:Detail,                                default:Footer                            }                        }                    ]                },                {                    path:'*',                    component:Index                }            ]        });        new Vue({            router,            el:"#box"        })    </script></body></html>
阅读全文
0 0