<!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. 南方IT教材反馈

    为了进一步提升教材质量,大家可以在底部留言区反馈您发现的任何问题或建议,谢谢!           最终我们将从所有读者中找出幸运读者发放奖品! 好教材也有我的一份功劳!

  2. 网页中通过js修改img的src属性刷新图片时，图片缓存问题现象表述及问题解决【ps：引用大神案例http://blog.csdn.net/goodleiwei/article/details/50737548】

    问题:上传一张图片,通过js更新src属性刷新图片使其即时显示时, 当img的src当前的url与上次地址无变化时(只更改图片,名称不变,不同图片名称相同)图片不变化(仍显示原来的图片) 但通过fir ...

  3. Spring依赖包

    spring框架jar包 1.下载spring源包spring地址:http://www.springsource.org/download我下的是spring-framework-3.1.0.REL ...

  4. C# 8.0 范围类型 Range Type

    目录 C# 8 范围类型 Range Type: 范围缩写: 从一个索引开始到数组的最后一个对象 从数组的第一个对象到指定索引 整个数组: 从数组的某个索引开始一直到距数组尾部某个索引: 范围类型 替 ...

  5. 记录常用的git命令

    之前的公司都是用svn的,现在的公司用git了,所以现在记录一下所用到的git命令,方便以后查看! git 常用命令 git add git add 命令可将该文件添加到缓存 git add . // ...

  6. js 回调函数理解与应用

    定义:在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函 ...

  7. 企业BI系统应用的切入点及五大策略

    从技术的角度来看,BI的技术正在走向成熟,处于一个发展的阶段,但它促使了BI的应用在成本方面开始逐步的降低,越来越多的企业在BI应用方面取得了成功.从实施的角度来出发,实施商业智能系统是一项复杂的系统 ...

  8. TensorFlow数据读取方式：Dataset API

    英文详细版参考:https://www.cnblogs.com/jins-note/p/10243716.html Dataset API是TensorFlow 1.3版本中引入的一个新的模块,主要服 ...

  9. ionic开发之Android的focus起作用，而iOS不起作用

    基于ionic的iOS的hybird APP无法使用focus获取焦点和键盘的问题. 解决办法就是: 原本APP的配置文件config.xml里面默认有一句 这句话的大概意思就是键盘的显示需要用户去触 ...

  10. JSTL核心标签库——<c:set>标签、<c:out>标签

    <c:set>标签 index.jsp <%@ page import="java.util.Map" %> <%@ page import=&quo ...