<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-router之使用transition设置酷炫的路由组件过渡动画效果</title>

    <script src="vue.js"></script>

    <script src="node_modules/vue-router/dist/vue-router.js"></script>

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

</head>

<body>

<div id="demo">

    <router-view></router-view>

</div>

<script type="text/x-template" id="home">

    <transition enter-active-class="animated rotateIn">

        <div>

            <li v-for="v in news">

                <a href="#" @click.prevent="go(v.id)">{{v.title}}</a>

            </li>

        </div>

    </transition>

</script>

<script type="text/x-template" id="content">

    <transition enter-active-class="animated slideInDown">

        <div>

            <h1>{{field.title}}--{{field.id}}</h1>

            <p>

                {{field.content}}

            </p>

            <a href="" @click.prevent="back()">返回首页</a>

        </div>

    </transition>

</script>

<script>

    const notFound = {

        template: '<h1>NotFound</h1>'

    }

    var data = [

        {id: 1, title: "php课程", content: "php是个比较牛的技术"},

        {id: 2, title: "java课程", content: "java是个比较牛的技术"},

        {id: 3, title: "pathon课程", content: "pathon是个比较牛的技术"}

    ]

    const home = {

        template: "#home",

        data() {

            return {

                news: data

            }

        },

        methods: {

            go(id) {

                //var url='/content/'+id; //url第一种写法

                //var url={name:'content',params:{id:id}};//url第二种写法

                //this.$router.replace(url);//replace()替换历史记录中的跳转：

                var url = {'path': '/content/' + id};//跳转到详情页  //url第三种写法

                this.$router.push(url);

            }

        }

    }

    const content = {

        template: "#content",

        data() {

            return {

                field: {}

            }

        },

        mounted() {

            var id = this.$route.params.id;

            for (let k = 0; k < data.length; k++) {

                if (data[k].id == id) {

                    this.field = data[k];

                }

            }

        },

        methods: {

            back() {

                this.$router.go(-1);

            }

        }

    }

    let routes = [

        {path: '/', component: home},

        {path: '/content/:id', component: content, name: "content"},

        {path: '/content/3', alias: ['/about']},

        {path: '*', component: notFound}

    ];

    //把组件交给路由器：

    let router = new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　

067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果的更多相关文章

  1. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  2. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  3. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  4. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  5. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  6. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  7. vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分

    vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...

  8. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  9. vue实现多个元素或多个组件之间动画效果

    多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: ...

随机推荐

  1. 20145335郝昊《网络攻防》Exp4 MS11_050

    20145335郝昊<网络攻防>Exp4 MS11_050 实验内容 初步掌握平台matesploit的使用 了解漏洞MS11_050漏洞:use-after-free漏洞,即对象被释放之 ...

  2. 使用maven开发MR

    1.安装mvn(可以省略,因为eclipse自带maven插件) 1.1. 上传安装包到linux 1.2. 解压maven安装包 mkdir /usr/maven -bin.tar.gz -C /u ...

  3. git_如何查看两个版本之间那些文件被修改

    需求 由于工程比较庞大,接近500M,每部署一次如果都全量部署,不仅仅磁盘空间耗费较大,最主要是要等很长时间, 之前就一直有这个问题,但是也就没有弄,上周领导发话了,这个问题必须要解决了 前记 增加带 ...

  4. ArchLinux For Arm 树莓派开机自启动脚本rc.local

    今天折腾了下树莓派的迅雷固件,迅雷的安装很顺利,解压直接运行portal 就搞定了, 但是自启动就有问题了,由于新版的ArchLinux切换到systemd,不但rc.conf省了,连rc.local ...

  5. <OFFER05> 05_ReplaceSpaces

    void ReplaceBlank(char str[], int length) // length >= the real length of string { ) { return; } ...

  6. POJ 2975 Nim（博弈）题解

    题意:已知异或和为0为必败态,异或和不为0为必胜态,问你有几种方法把开局从当前状态转为必败态. 思路:也就是说,我们要选一堆石头,然后从这堆石头拿走一些使剩下的石碓异或和为0.那么只要剩下石堆的异或和 ...

  7. 关于Spring的配置文件的注解使用

    从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法, 这些方法将会AnnotationConfigApplic ...

  8. Java 多线程 破解密码 demo

    功能要求: 具体类: Decrypt  测试类,用来启动破解和日志线程 DecryptThread 破解线程类,用来生成测试的字符串,并暴力破解 LogThread 日志类,将输出每次生成的字符串结果 ...

  9. [luoguP1119]灾后重建

    题目链接 毒瘤题 卡spfa 可能dij也卡,没试过 然后放floyd过了 但其实spfa很好打,虽然只有60 让我们来分析一下spfa的效率,假设这个出题人极其毒瘤,出网格图 又因为是在线询问,所以 ...

  10. 同一主机配置：vsftpd+pam+mysql

    两种情况: 1.vsftpd和MySQL不在同一台主机上 vsftpd服务器和MySQL服务器不在同一台主机上时,vsftpd服务器需要安装pam_mysql. 在指定用户认证时,vsftpd需要链接 ...