vue2.0學習筆記之路由（二）路由嵌套+動畫

時間  2019-11-30
標籤 vue2.0 vue 學習 筆記 路由 嵌套 動畫 欄目 系統網絡 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0學習筆記之路由（二）路由嵌套+動畫</title>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/home">主頁</router-link>
            <router-link to="/user">用戶中心</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    // 定義組件
    var Home = {
        template:`
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <h3>主頁內容</h3>
            </transition>
        `
    }
    var User = {
        template:`
            <div>
                <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                    <h3>用戶中心</h3>
                </transition>
                <ul>
                    <li><router-link to="user/userinfo">查看我的信息</router-link></li>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>

        `
    }
    var UserDetail = {
        template:"<h4>我的信息</h4>"
    }
    // 配置路由
    const routes = [
        { path:"/home", component:Home },
        {
            path:"/user",
            component:User,
            children:[
                { path:"userinfo",component:UserDetail }
            ]
        },
        { path:"*", redirect:"/home" } // 重定向讓頁面加載即顯示Home
    ]
    // 生成路由實例
    const router = new VueRouter({
        routes
    })
    // 掛載到vue實例上
    new Vue({
        el:"#app",
        router
    })
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程