Day4.5路由添加切换动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/js/vue.js"></script>
    <!--    第一步：安装 vue-router -->
    <script src="../lib/js/vue-router.js"></script>
    <!--    -->
    <style>
        /**
            第一种方法：使用原生提供的类 加样式
         */
        .router-link-active,
            /**
                第二种方法：使用自己定义的类 加样式
             */
        .myActive{
            color: #204d74;
            font-weight: 800;
            font-style: italic;
            font-size: 60px;
            background-color: yellow;
        }
        /* 组件切换动画样式 */
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(200px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s linear;
        }
    </style>
</head>
<body>
<div id="app">
    <!--    <a href="#/login">登录</a>-->
    <!--    <a href="#/register">注册</a>-->
    <!--    router-link 的使用
                router-link 默认渲染为一个  a  标签，也可以使用 tag='span' 渲染为指定的标签 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--    router-view 是由 vue-router 提供的，专门用来当作占位符的，将来路由规则匹配到的组件
               就会展示到这个 router-view 中去-->
<!--    为组件切换添加动画 -->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>
<script>
    // 创建组件模板对象
    const login = {
        template:'<h1>login组件</h1>'
    };
    const register = {
        template:'<h1>register组件</h1>'
    };
    /**
     * vue-router 基本使用
     * @type {VueRouter}
     */
//  创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了一个
//      路由的构造函数，叫作 VueRouter
//  在 new 路由对象的时候，可以为 构造函数传递一个配置对象
    const routerObj = new VueRouter({
        // route // 这个配置对象中的 route 表示【路由匹配规则】

        routes:[ // 路由匹配规则

            // 请求重定向，这里的 redirect 和 node 中的 redirect 完全是两码事
            { path:'/',redirect:'/login'},
            // 每个路由规则都是一个对象，这个对象身上有两个必须的属性
            //    属性1. path，表示监听哪个路由链接地址
            //    属性2. component，表示如果路由是前面匹配到的path，则展示 component属性对应的那个组件
            //  注意：component的属性值，必须是一个组件的模板对象，不能是组件的引用名称
            { path:'/login',component:login },
            { path:'/register',component:register }
        ],
        /**
         * 修改高亮的第二种方式，自己定义类
         */
        linkActiveClass:'myActive'
    });


    // 创建 vue 实例
    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{},

        // 将路由规则对象注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
        router:routerObj
    })
</script>
</body>
Day4.5路由添加切换动画

猜你喜欢
