1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue2.0学习笔记之路由（二）路由嵌套+动画</title>
  6.     <link rel="stylesheet" href="animate.css">
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <div>
  11.             <router-link to="/home">主页</router-link>
  12.             <router-link to="/user">用户中心</router-link>
  13.         </div>
  14.         <div>
  15.             <router-view></router-view>
  16.         </div>
  17.     </div>
  18. </body>
  19. </html>
  1. <script src="vue.js"></script>
  2. <script src="vue-router.js"></script>
  3. <script>
  4.     // 定义组件
  5.     var Home = {
  6.         template:`
  7.             <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
  8.                 <h3>主页内容</h3>
  9.             </transition>
  10.         `
  11.     }
  12.     var User = {
  13.         template:`
  14.             <div>
  15.                 <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
  16.                     <h3>用户中心</h3>
  17.                 </transition>
  18.                 <ul>
  19.                     <li><router-link to="user/userinfo">查看个人信息</router-link></li>
  20.                 </ul>
  21.                 <div>
  22.                     <router-view></router-view>
  23.                 </div>
  24.             </div>
  25.  
  26.         `
  27.     }
  28.     var UserDetail = {
  29.         template:"<h4>个人信息</h4>"
  30.     }
  31.     // 配置路由
  32.     const routes = [
  33.         { path:"/home", component:Home },
  34.         {
  35.             path:"/user",
  36.             component:User,
  37.             children:[
  38.                 { path:"userinfo",component:UserDetail }
  39.             ]
  40.         },
  41.         { path:"*", redirect:"/home" } // 重定向让页面加载即显示Home
  42.     ]
  43.     // 生成路由实例
  44.     const router = new VueRouter({
  45.         routes
  46.     })
  47.     // 挂载到vue实例上
  48.     new Vue({
  49.         el:"#app",
  50.         router
  51.     })
  52. </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. 使用并发工具实现 RPC 调用流量控制

    前言 RPC 服务中,每个服务的容量都是有限的,即资源有限,只能承受住给定的网络请求,所以,在设计 RPC 框架的时候,一定要考虑流量控制这个问题.而 Java 中,实现流量控制有很多中方式,今天说 ...

  2. JavaScript之String总汇

    一.常用属性 ·length:返回字符串中字符长度 let str = 'asd '; str.length = 1;//无法手动修改,只读 console.log(str.length);//4 二 ...

  3. C# 数组深拷贝

    数组深拷贝,即完全复制出一份新的数组,两个数组内容完全相同. 一般有四种方法: 1. 循环遍历复制 2. 数组的成员方法:CopyTo CopyTo方法用作将源数组全部拷贝到目标数组中,可以指定目标数 ...

  4. JS DOM 操作 项目总结 【超链接】【数列】【span】

      超链接   每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母). “爱恨原则”(Lo ...

  5. Hibernate映射 --- 自身跟自身的一对多关联

      自身跟自身的一对多关联 什么时候会出现自身一对多关系呢?下面举个例子. 淘宝店里商品分类,一级分类:家用电器,个人化妆,运动户外等 家用电器下面二级分类:大家电,生活电器,厨房电器等 二级分类大家 ...

  6. python的深浅拷贝以及fromkeys的用法

    1.join()的用法:使用前面的字符串.对后面的列表进行拼接,拼接结果是一个字符串 # lst = ["alex","dsb",'wusir','xsb'] ...

  7. MySql导出sql语句

    sql解释: mysqldump 是mysql的一个专门用于拷贝操作的命令 --opt 操作的意思 --compress 压缩要传输的数据 --skip-lock 忽略锁住的表(加上这句能防止当表有外 ...

  8. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 ...

  9. IntelliJ idea 备份与恢复

    为了防止突然断电或者电脑突然关机导致idea恢复出厂设置,需要定期备份配置. 一.备份 File---Export Settings 将settings.jar 文件导入到C:\Users\xutin ...

  10. Js利用Canvas实现图片压缩

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...