<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />

     <title>管理后台</title>

     <script src="../lib/jquery2.1.4.min.js"></script>

     <script src="../lib/Vue2.5.17.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"

         crossorigin="anonymous">

 </head>

 <style>

 </style>

 <body>

     <div id="app">

         <router-link to="/account">Account</router-link>

         <router-view></router-view>

     </div>

     <template id="tmp1">

         <div>

             <h1>这是 Account 组件</h1>

             <router-link to="/account/login">登录</router-link>

             <router-link to="/account/register">注册</router-link>

             <router-view></router-view>

         </div>

     </template>

     <!-- 子组件 -->

     <template id="login">

         <div>

             <h1>登录一下</h1>

         </div>

     </template>

     <template id="register">

         <div>

             <h1>注册一下</h1>

         </div>

     </template>

     <script>

         var login = {

             template: '#login'

         };

         var register = {

             template: '#register'

         };

         var account = {

             template: '#tmp1'

         };

         var routerObj = new VueRouter({

             routes: [{

                     path: '/account',

                     component: account,

                     //正确的方法写在children里面

                     children : [

                         { path : 'login' , component : login},

                         { path : 'register' , component : register},

                     ]

                 },

                 // 错误方法

                 // { path : '/account/login' , component : login},

                 // { path : '/account/register' , component : register},

             ]

         });

         var vm = new Vue({

             el: '#app',

             data: {},

             methods: {

             },

             router: routerObj

         });

     </script>

 </body>

 </html>

Vue系列之 => 路由的嵌套的更多相关文章

  1. Vue系列之 => 路由匹配

    路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  3. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  4. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. Vue系列：Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  6. Vue中路由的嵌套

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  7. vue.js_11_路由的2中参数传递和路由的嵌套

    1.以?的形式传递参数   <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...

  8. vue路由-动态路由和嵌套路由

    一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...

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

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

随机推荐

  1. Elasticsearch学习笔记——分词

    1.测试Elasticsearch的分词 Elasticsearch有多种分词器(参考:https://www.jianshu.com/p/d57935ba514b) Set the shape to ...

  2. 蜕变成蝶~Linux设备驱动之CPU与内存和I/O

    那是世上最远的距离 思念让我无法去呼吸 你的一动和一举 占据我心里 陪我每个孤独无尽的夜里 用我心中盛放的画笔 描绘你微笑时的绚丽 爱让人痛彻心底 我却不怀疑 你的存在是我生命的奇迹 感受你的每一次的 ...

  3. iview表单验证不生效问题注意点

    按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...

  4. oracle 子查询中null的问题（in 和 not in）

    这里的in后面的句子可以理解为or拼接,简单举例即 in (9566,9839,null)可以等价于mgr=9566 or mgr=9839 or mgr=null, not in (9566,983 ...

  5. Python的循环导入问题

    循环导入的最好的解决方法是从架构上优化,即调整模块和模块成员变量的设计.一个好的原则是:可导出的成员变量,都不应该依赖于导入进来的成员变量. 但是在业务开发的过程中,总会遇到通过架构层面解决不了的导入 ...

  6. Kafka 2.1.0压缩算法性能测试

    Apache Kafka 2.1.0正式支持ZStandard —— ZStandard是Facebook开源的压缩算法,旨在提供超高的压缩比(compression ratio),具体细节参见htt ...

  7. jquery实现同时展示多个tab标签+左右箭头实现来回滚动

    内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...

  8. 以太坊: ETH 发送交易 sendRawTransaction 方法数据的签名 和 验证过程

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  9. asp.net mvc 路由检测工具

    初学mvc,路由搞不清楚,可以通过一款插件 查看匹配的路由. 工具名<RouteDebugger> 可以在nuget中查询RouteDebugger后,安装.或者在控制台进行安装: pm& ...

  10. Spring AOP 随记

    本周经历各种面试失败后,最后一站张建飞老大的阿里,感觉有着这般年纪不该有的垃圾履历而忧伤中,不过还是要继续加油的,毕竟他说的好,都是经历,无愧初心. 所以为了更加深入理解Spring AOP我又翻起了 ...