<!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. 使用rsync+inotify-tools+ssh实现文件实时同步

    假设某服务器架构中有两台web服务器(IP为192.168.1.252和192.168.1.254),一台代码更新发布服务器(IP为192.168.1.251),需要同步的目录是/data/www/, ...

  2. ABP文档 - Quartz 集成

    文档目录 本节内容: 简介 安装 创建工作 调度工作 更多 简介 Quartz 是一个功能完整的开源工作调度系统,可用于最小的应用到一个大型的企业系统.Abp.Quartz 包简单地把Quartz集成 ...

  3. 怎么在ubuntu上运行php代码?

    1. 首先,你需要安装Apache2. sudo apt-get update sudo apt-get install apache2 当安装完以后,Apache就已经开始运行啦,你可以进行测试,通 ...

  4. Android基础工具函数代码集

    整理在学习研究Android开发,编写了一些基本用到的工具集,现在整理分享(后续会持续更新,有问题还请指出). 1.HttpClient工具,使用Apache的HttpClient类实现get和pos ...

  5. 利用AForge.NET 调用电脑摄像头进行拍照

    当然了,你需要去官网下载类库,http://www.aforgenet.com/ 调用本机摄像头常用的组件: AForge AForge.Controls AForge.Imaging AForge. ...

  6. 解读Java内部类

    一.基本概念: 顾名思义,内部类存在于外部类当中,依附于外部类.就像眼睛和脑袋的关系一样. 二.几点说明: 1.内部类仍然是一个独立的类,在编译之后内部类会被编译成独立的.class文件,但是前面冠以 ...

  7. .NET Core跨平台：使用.NET Core开发一个初心源商城总括

    1..NET Core基本介绍 a 作为一个.NET的开发者,在以前的开发中,我们开发的项目基本都是部署在windows服务器上,但是在windows服务器上的话某些比较流行的解决访问量的方案基本都是 ...

  8. PHP结合memcacheq消息队列解决并发问题

    在处理业务逻辑时有可能遇到高并发问题,例如商城秒杀.微博评论等.如果不做任何措施可能在高瞬间造成服务器瘫痪,如何解决这个问题呢?队列是个不错的选择.队列(Queue)又称先进先出(First In F ...

  9. cocoapods 删除已导入项目的第三方库和移除项目中的cocoapods

    第一部分将介绍如何删除项目中已经由cocoapods配置好的第三方 1.打开项目中的Podfile文件 2.删除选中的pod Snapkit的命令行3.打开终端cd到当前项目的根目录下重新执行pod ...

  10. [HDU1282]回文数猜想

    Problem Description 一 个正整数,如果从左向右读(称之为正序数)和从右向左读(称之为倒序数)是一样的,这样的数就叫回文数.任取一个正整数,如果不是回文数,将该数与他的倒 序数相加, ...