<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script type="text/javascript" src="vue.js"></script>

  <script type="text/javascript" src="vue-router.min.js"></script>

</head>

<body>

  <div id="box">

    <!-- 跳转路径 -->

    <router-link to="/home">home</router-link>

    <router-link to="/news">news</router-link>

    <div>

      <router-view></router-view>

    </div>

  </div>

  <script type="text/javascript">

  var News = {

    template:`

    <div>

        <h3>新闻</h3>

        <router-link to="/news/user">子路由</router-link>

        <div><router-view></router-view></div>

    </div>

    `

  };

  var User = {

      template: '<p>我是子路由</p>'

  };

  var Home = {

    template: '<h3>主页</h3>'

  };

  // 配置路由

  var jump = [{

    path: '/home',

    component: Home

  }, {

    path: '/news',

    component: News,

    // 配置子路由

    children:[{

        // 注意这里的path不要加反斜杠

        path:'user',

        component:User

    }]

  }, {

    path: '*',

    redirect: '/home'

  }];

  // 创建实例

  var router = new VueRouter({

    routes: jump

  });

  // 挂载实例

  var app = new Vue({

    el: '#box',

    router: router

  })

  </script>

</body>

</html>

我相信这个demo都能看懂，子路由的path不能加反斜杠

vue-router2.0简单路由嵌套的更多相关文章

  1. 060——VUE中vue-router之路由嵌套在文章系统中的使用方法：

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

  2. 059——VUE中vue-router之路由嵌套在文章系统中的使用方法：

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

  3. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  4. Vue2.0实现路由

    Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <route ...

  5. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  6. vue2.0学习笔记之路由（二）路由嵌套+动画

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

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

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

  8. vue - 子路由-路由嵌套

    描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加<router-view/>来展 ...

  9. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

随机推荐

  1. 安卓TCP通信

    tCPServer.java 服务器的两个socket都没有关闭:s,ss.两个都是一直开启,然后数据才有显示 class tcpServer { public static void main(St ...

  2. 一个web应用的诞生--数据表单

    下面把角色分为两种,普通用户和管理员用户,至少对于普通用户来说,直接修改DB是不可取的,要有用户注册的功能,下面就开始进行用户注册的开发. 用户表 首先要想好用户注册的时候需要提供什么信息:用户名.密 ...

  3. VS2015中VB.NET类(dLL)里下载并读取文件

    最近要从一个http上下载个文件,差点就直接telnet了,突然发现了这个: My.Computer.Network.DownloadFile("目标文件网址") 但是还得读取它, ...

  4. （@WhiteTaken）设计模式学习——建造者模式

    Builder模式,也就是建造者模式或者生成器模式,是GoF提出的23种设计模式的一种. 这种模式是用来隐式的创建复合对象而提出来的. 创建复合对象的过程,不在主客户端显示. 下面直接上代码.以修建房 ...

  5. js拉起或下载app

    产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页. 经过各种查阅资料尝试总结了一个还算可以的办法. 拉起app的原理就是js和原生统一好一个地址 ...

  6. OSS最新进度汇报（2.25）

    OSS系列最新进度情况如下:一. OSS.Social进度 1. 客服接口升级至新客服接口 2. BaseRecMsg中RecMsg字符串类型修改为xml类型 3. 添加Redis缓存注册实现,代码见 ...

  7. Java实现OOP(面向对象编程)

    一.对象的综述 面向对象编程(OOP)具有多方面的吸引力.对管理人员,它实现了更快和更廉价的开发与维护过程.对分析与设计人员,建模处理变得更加简单,能生成清晰.易于维护的设计方案.对程序员,对象模型显 ...

  8. [bzoj3196]Tyvj 1730 二逼平衡树——线段树套平衡树

    题目 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查 ...

  9. SqlService性能检测和优化工具

    工具概要 如果你的数据库应用系统中,存在有大量表,视图,索引,触发器,函数,存储过程,sql语句等等,又性能低下,而苦逼的你又要对其优化,那么你该怎么办?哥教你,首先你要知道问题出在哪里?如果想知道问 ...

  10. js实现Mac触摸板双指事件（上、下、左、右、放大、缩小）

    前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...