Vue动画和 Vue路由

Jacksoncz

墨衍会员 · AI 创作全网分发码龄9年

关注

原创最新推荐文章于 2026-02-26 21:06:00 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

Vue动画和 Vue路由

一.transition：

Vue1.0:

<p transition="fade"></p>

.fade.transition{}
.fade-enter{}
.fade-leave{}

(一).Vue2.0以后，transition组件

        <transition name="fade">
            运动的内容(元素，属性,路由...)
            <p v-show="show"></p>
        </transition>

class定义：
    .fade-enter{}:初始状态
    .fade-enter-active{}：变化成什么样子 ->当元素出来（显示）

    .fade-leave{}：
    .fade-leave-active{}：变化成什么样子 ->当元素离开（消失）

(二).如何animate配合使用？

<link rel="stylesheet" href="animate.css">

        <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated"></p>
        </transition>

对多个元素：transition-group + :key
        <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
            <p v-show="show" class="animated" :key="1"></p>
            <p v-show="show" class="animated" :key="2"></p>
        </transition-group>

二、Vue2.0路由
`Vue2.0-router基本使用：

    （一）、
    <div id="box"> **//1.布局**
        <div>
            <router-link to="/home">主页</router-link>
            <router-link to="/news">新闻</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <script> **//2.路由的具体写法**
        //组件
        var  Home={
            template:'<h3>我是主页</h3>'
        };
        var  News={
            template:'<h3>我是新闻</h3>'
        };
        // 配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News}，
            {path:"*",redirect:'/home'} // 重定向，之前的router.rediect丢弃了
        ];
        //生成路由
        const router=new VueRouter({
            routes
        });
        //挂到Vue上
        new Vue({
            router,
            }.$mount('#box'));
（二）、路由嵌套
    /user/
     const routes=[
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[ //核心
                    {path:'username',component:UserDetail}
                ]
            },
            {path:"*",redirect:'/home'}
        ];
  （三）、$route.params
  （四）、路由实例方法：
          route.push({path:'路径'}); //直接添加一个路由，表现是切换路由，本质是往历史纪录添加一个记录
          route.replace({path:"路径"}); //替换一个路由

三、脚手架：vue-loader

Vue1.0 ->
        new Vue({
          el: '#app',
          components:{App}
        })

Vue2.0 ->
        new Vue({
          el: '#app',
          render: h => h(App)
        })
Vue2.0loader 和vue-router