<!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. rabbitmq.config配置文件

    %% -*- mode: erlang -*-%% -------------------------------------------------------------------------- ...

  2. Google Guice学习

    学习动力:公司项目使用 官方文档:https://github.com/google/guice/wiki/Motivation 学习阶段:入门 主要部份: 简介 Bindings方式 Scopes设 ...

  3. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  4. SVM入门（一）

    近来,了解了一下SVM(支持向量机 support vector machine)的原理.顺便把自己理解的内容整理一下. 不讲背景啦,直接切入主题.     一.什么是支持向量机 好比说,我们现在在一 ...

  5. 《汇编语言程序设计》——仿windows计算器

    <汇编语言程序设计> ——计算器程序设计 目录 一.     题目与目标 1.      题目 2.      学习目的 二.     分析与设计 1.      系统分析 2.      ...

  6. [.NET] RabbitMQ 的行为艺术

    RabbitMQ 的行为艺术 序 好像,今天已经是 2 月 28 号了. 听说,29.30.31 号放假. 据说,有图,有真相. 目录 简介 环境搭建 示例一:简单的 Hello World 示例二: ...

  7. JNI调用的helloworld（JNI_OnLoad映射方式）

    本示例展示JNI的基本示例,helloworld级别的,不过是用JNI_OnLoad映射的方式. 直接看代码,先看包含native method的Person.java的代码: package hel ...

  8. 每天一个Linux命令（06）--rmdir命令

    终于忙完了公司的事,可以安静的充充电了. 今天学习一下Linux中命令:rmdir 命令,rmdir是常用的命令,该命令的功能是删除空目录,一个目录被删除之前必须是空的.(注意,rm -r dir 命 ...

  9. Zookeeper + Kafka 集群搭建

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. 安装包 kafka_2.12-0.10.2.0.tgz zookeeper-3.4.9.tar.gz ...

  10. JavaWeb之DBUtils

    一.什么是DBUtils及作用 DBUtils是apache公司写的.DBUtils是java编程中的数据库操作实用工具,小巧简单实用. DBUtils封装了对JDBC的操作,简化了JDBC操作.可以 ...