vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0学习笔记之路由（二）路由嵌套</title>
</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:"<h3>主页内容</h3>"
}
var User = {
template:`
<div>
<h3>用户中心</h3>
<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> ...
随机推荐
- Error creating bean with name 'tomcatEmbeddedServletContainerFactory'
org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$EmbeddedTomcato ...
- MVC应用jQuery动态产生数据
在前一篇<MVC应用程序JsonResult()的练习>http://www.cnblogs.com/insus/p/3402042.html中.Insus.NET在练习中学会了在视图中, ...
- winform窗体 小程序【登录窗体】【恶搞程序】
登录窗体 using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; ...
- 在mysql中RIGHT JOIN与group by一起使用引起的一个大bug
本来按理说这个小问题不值得写一个博客的,不过正是这个小问题造成了一个大bug. 本来每月对数据都好好的,但是这一两天突然发现许多数据明显不对,这一块的代码和sql有些不是我写的,不过出现了bug,还是 ...
- 步步深入MySQL：架构->查询执行流程->SQL解析顺序！
一.前言 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了. 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序 ...
- java.lang.ExceptionInInitializerError异常
今天在开发的过程中,遇到java.lang.ExceptionInInitializerError异常,百度查了一下,顺便学习学习,做个笔记 静态初始化程序中发生意外异常的信号,抛出Exception ...
- Object of type 'ListSerializer' is not JSON serializable “listserializer”类型的对象不可JSON序列化
Object of type 'ListSerializer' is not JSON serializable “listserializer”类型的对象不可JSON序列化 一般原因为 序列化的对象 ...
- MySQL入门详解（三）---mysql如何进行主从配置
基本要求 两台服务器(windows,linux,mac) 双方mysql版本需一致,如不一致,只要主节点低于从节点 两台服务器防火墙关闭 双方数据库所用的用户,要具有远程访问的权限 主服务器配置 修 ...
- windows10 java环境变量设置
由于安装的是jdk1.8所以不需要配置classpath了,只需要配置java_home和path即可. 我的电脑 -> 右键属性 -> 高级系统设置 -> 高级 -> 环境变 ...
- ConcurrentDictionary的用法
private static ConcurrentDictionary<Guid, string> dictDbNames = new ConcurrentDictionary<Gu ...