<!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>

vue2.0学习笔记之路由（二）路由嵌套+动画的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue2.0学习笔记一 ：各种表达式

    #,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性:     #,过滤器可以串联 {{ message | filterA | ...

  3. vue2.x学习笔记（十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...

  4. Netty4.0学习笔记系列之二：Handler的执行顺序（转）

    http://blog.csdn.net/u013252773/article/details/21195593 Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet ...

  5. vue2.0学习笔记之组件

    [易错点]:  1.   组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2.   组件名称采用横杠间隔命名时,第一个字母大写会报错.   写法一:全局 ...

  6. Netty4.0学习笔记系列之二：Handler的执行顺序

    Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet中的filter很像,通过Handler可以完成通讯报文的解码编码.拦截指定的报文.统一对日志错误进行处理.统一对 ...

  7. USB2.0学习笔记连载（二）：USB基础知识简介

    USB接口分为USB A型.USB B型.USBmini型.USBmicro型.USB3.0其中每种都有相应的插座和插头. 图1 图2 上图是USBA型接口,图1为插座,图2为插头.插座指向下行方向, ...

  8. vue2.0学习笔记（第八讲）（vue-cli的使用）

    vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...

  9. Vue2.0学习笔记

    环境搭建 vue-cli@3    vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...

随机推荐

  1. .18-浅析webpack源码之compile流程-rules参数处理(1)

    Tips:写到这里,需要对当初的规则进行修改.在必要的地方,会在webpack.config.js中设置特殊的参数来跑源码,例如本例会使用module:{rules:[...]}来测试,基本上测试参数 ...

  2. MySql错误处理-错误处理的例子

    有几种错误处理的声明形式: § 如果任何错误(不是 NOT FOUND ) , 设置 l_error 为 1 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPT ...

  3. LDA(线性判别分析，Python实现)

    源代码: #-*- coding: UTF-8 -*- from numpy import * import numpy def lda(c1,c2): #c1 第一类样本,每行是一个样本 #c2 第 ...

  4. REST风格的应用程序实现

    莫笑我老土,因为我确实是最近才听说REST风格的,以前就是觉得 /category/product/pid 这样的地址非常的漂亮,但是那只是表象罢了,了解深入以后,发现必须有一个客户端的Ajax En ...

  5. 月经贴:当落魄的.NET基佬遇上不可一世的JAVA派 developer

    事先声明,这篇文章很没有营养,大家当笑话看就好,不要搞骂战污染博客园了谢谢. 背景: .NET(以下简称N)心里想:现在企业级应用.NET用的少,但起码.net的语法特性优美,IDE宇宙最强吧,啧啧. ...

  6. 了解java虚拟机—串行回收器（6）

    串行回收器 串行回收器只有一个工作线程,串行回收器可以在新生代和老年代使用,根据作用于不同的堆和空间,分为新生代串行回收器和老年代串行回收器. 1.新生代串行回收器 串行收集器是所有垃圾回收器中最古老 ...

  7. HDU3534(SummerTrainingDay13-C tree dp)

    Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. JNDI 与 LDAP

    对于众多接口服务.协议.互联网名称,总会遇到感到熟悉,但是时间一长就会忘记,所以还是要自己整理一下,加强记忆,当然最好的方式还是动手实践. JNDI : 全称:JAVA NAMING AND Dire ...

  9. JS简单验证

    1.验证是否全为数字 2.验证邮箱 3验证手机号 4.验证身份证号 5.验证时间格式 下面是代码,可直接用,有注释 <html> <meta charset="utf-8& ...

  10. JMeter初体验

    Meter是开源软件Apache基金会下的一个性能测试工具,用来测试部署在服务器端的应用程序的性能. 1.JMeter下载和安装 JMeter可以在JMeter的官方网站下载,目前能下载的是JMete ...