vue2.0学习笔记之路由（二）路由嵌套+动画
<!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学习笔记之路由（二）路由嵌套+动画的更多相关文章
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记一 ：各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
- vue2.x学习笔记（十二）
接着前面的内容:https://www.cnblogs.com/yanggb/p/12592256.html. 组件基础 组件化是vue的一个重要特性,也是vue学习中非常重要的一个知识点. 基础示例 ...
- Netty4.0学习笔记系列之二：Handler的执行顺序（转）
http://blog.csdn.net/u013252773/article/details/21195593 Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet ...
- vue2.0学习笔记之组件
[易错点]: 1. 组件内html代码片段超过一个标签时必须套一个根元素,即template模板子元素只能是一个. 2. 组件名称采用横杠间隔命名时,第一个字母大写会报错. 写法一:全局 ...
- Netty4.0学习笔记系列之二：Handler的执行顺序
Handler在netty中,无疑占据着非常重要的地位.Handler与Servlet中的filter很像,通过Handler可以完成通讯报文的解码编码.拦截指定的报文.统一对日志错误进行处理.统一对 ...
- USB2.0学习笔记连载（二）：USB基础知识简介
USB接口分为USB A型.USB B型.USBmini型.USBmicro型.USB3.0其中每种都有相应的插座和插头. 图1 图2 上图是USBA型接口,图1为插座,图2为插头.插座指向下行方向, ...
- vue2.0学习笔记（第八讲）（vue-cli的使用）
vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...
- Vue2.0学习笔记
环境搭建 vue-cli@3 vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...
随机推荐
- springboot自定义静态文件目录,解决jar打包后修改页面等静态文件的问题
1.问题 springboot开发时候,一般将文件放在resources目录,但是发布后想修订文件或是开发时候修改了文件内容一般需重新打包或者重启动才能达到效果: 2.原因 将资源文件打包入jar包, ...
- Nodejs+Express构建网站
1.预先安装(系统环境widows): nodejs 可在官网下载安装 https://nodejs.org/en/ visual studio code 可在官网下载安装 http://co ...
- git 使用 VisualStudio 比较分支更改
有时候需要比较两个分支的不同,这时如果提交到 github ,那么默认就可以看到.但是这时因为没有ide的高亮或者其他的功能,看起来觉得不好 默认的 VisualStudio 比较文件比 github ...
- 《剑指offer》（第二版）Java实现
Github链接: <剑指offer>(第二版)Java实现 欢迎star!
- Java 基础：变量 与 字符串
变量 Java中没有初始化的变量是不能直接使用的 局部变量 String msg; System.out.print(msg); 就会提示错误,我们必须显式的为变量指定一个初值如null.刚开始学Ja ...
- PHP定界符<<<eof 使用
PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法 ——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等特 ...
- 设计模式原则(7)--Composition&AggregationPrinciple(CARP)--合成&聚合复用原则
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.定义: 要尽量使用合成和聚合,尽量不要使用继承. 2.使用场景: 要正确的选择合成/复用和继承,必须透彻地理 ...
- LOJ#505. 「LibreOJ β Round」ZQC 的游戏(最大流)
题意 题目链接 Sol 首先把第一个人能吃掉的食物删掉 然后对每个人预处理出能吃到的食物,直接限流跑最大流就行了 判断一下最后的最大流是否等于重量和 注意一个非常恶心的地方是需要把除1外所有人都吃不到 ...
- element-ui Progress、Badge、Alert组件源码分析整理笔记（四）
Progress进度条组件 <template> <!--最外层--> <div class="el-progress" :class="[ ...
- 解决stackoverflow打开缓慢的问题
一.原因: 因为stackoverflow用的是谷歌的api,在国内谷歌是被禁用的,所以才会打开缓慢,并不是stackverflow被墙 二.解决方法: 1.如果你正在使用的是火狐浏览器,那么请按照下 ...