为路由切换启动动画

最新推荐文章于 2024-07-05 22:10:55 发布

_有光

最新推荐文章于 2024-07-05 22:10:55 发布

阅读量160

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/youguang_/article/details/88390182

版权

Vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .myactive{
            font-weight: 700;
            font-size: 16px;
            background-color: yellow;
            color: pink;
            text-decoration: underline;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition:all 1s ease
        }
    </style>
</head>
<body>
<div id="app">
    <!--<a href="#/login">登录组件</a>-->
    <!--<a href="#/register">注册组件</a>-->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <transition mode="out-in">
        <router-view></router-view>
    </transition>

    <!--// vue-router提供的标签，专门用来当作占位符，将来路由规则匹配到的组件会展示到它中去-->
</div>
<script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
<script src="vue-router.js"></script>
<script>
    // 创建两个路由组件
    var login = {
        template:"<h3>登录页面</h3>"
    }
    var register = {
        template:"<h3>注册页面</h3>"
    }
    // 创建一个路由对象；
    // 为构造函数传递一个配置对象

    var routerObj = new VueRouter({
        // 路由配置规则都是一个对象，必须有两个属性；
        routes:[
            {path:"/login",component:login},
            {path:"/register",component:register}
        ],
        linkActiveClass:"myactive"
    })
    var vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },
        // 将路由规则对象注册到vue实例上用来监听URL地址变化，然后展示对应的组件
        router:routerObj
    })
</script>
</body>
</html>

_有光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为路由切换启动动画

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .myactive{ fon
复制链接

扫一扫

专栏目录