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

直接把代码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>
vue路由+子路由+具名路由demo实例(结合animate.css动画)

直接把代码copy下来自己运行吧

猜你喜欢
