<!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. SVM matlab 代码详解说明

    x=[0 1 0 1 2 -1];y=[0 0 1 1 2 -1];z=[-1 1 1 -1 1 1]; %其中,(x,y)代表二维的数据点,z 表示相应点的类型属性. data=[1,0;0,1;2 ...

  2. Xcode插件失效解决办法

    升级完Xcode突然间发现之前安装的所有插件都不生效了,费了九牛二虎之力找到了解决办法...      1.打开终端,输入以下代码获取到DVTPlugInCompatibilityUUID       ...

  3. 深度神经网络（DNN）的正则化

    和普通的机器学习算法一样,DNN也会遇到过拟合的问题,需要考虑泛化,这里我们就对DNN的正则化方法做一个总结. 1. DNN的L1&L2正则化 想到正则化,我们首先想到的就是L1正则化和L2正 ...

  4. 【Zookeeper】源码分析之网络通信（一）

    一.前言 前面已经分析了请求处理链中的多数类,接着继续分析Zookeeper中的网络通信模块. 二.总体框图 对于网络通信模块,其总体框图如下所示 说明: Stats,表示ServerCnxn上的统计 ...

  5. C#开发step步骤条控件

    现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...

  6. dubbo源码分析（一）

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  7. Python入门教程（1）

    人生苦短,我用Python! Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于19 ...

  8. wemall app商城源码中android按钮的三种响应事件

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码中android按 ...

  9. 基于 Koa平台Node.js开发的KoaHub.js的跳过组件代码

    koahub-skip koahub skip middleware koahub skip Conditionally skip a middleware when a condition is m ...

  10. Repcached实现memcached复制

    1.介绍     repcached是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的master/slave都是可读写的,而且可以相互同步,如果 ma ...