<!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. 21备忘录模式Memento

    一.什么是备忘录模式 Memento模式也叫备忘录模式,是行为模式之 一,它的作用是保存对象的内部状态,并在需要 的时候(undo/rollback)恢复对象以前的状态. 二.备忘录模式的应用场景 如 ...

  2. 内存(RAM或ROM)和FLASH存储的真正区别总结

    转载自:http://blog.csdn.net/liangkaiyang/article/details/59556531.什么是内存     什么是内存呢?在计算机的组成结构中,有一个很重要的部分 ...

  3. 垃圾wps弹出，现在连关闭按钮都不给了

    垃圾wps弹出,现在连关闭按钮都不给了,有点起色就变得相当垃圾.

  4. linux telnet检测与某个端口是否开通

    转自:http://blog.51cto.com/meiling/1982402 一:telnet此法常被用来检测是个远端端口是否通畅. 测试域名: # telnet baidu.com 80 Try ...

  5. Oracle误删除数据的恢复方法（转）

    来源:原创网站北京北亚数据恢复中心,转载须注明出处. 学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些 ...

  6. Linux下的搜索查找命令的详解(locate)

    3.locate locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中 ...

  7. HTTP状态码--含义

    以下是HTTP状态码(HTTP Status Code)及其解释 1xx(临时响应) (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. (切换协议) 请 ...

  8. 判断网页请求与FTP请求

    实例说明 在访问Internet网络时,经常涉及到很多访问协议,其中最明显.最常用的就是访问页面的http协议.访问ftp服务器的FTP协议等.

  9. PHP(一般标签介绍，标签特性，实体名称，绝对路径与相对路径）

    h1:为标题  h1~h6 标题会逐渐变小 需更换标签里面的数字 如: <h1>这是标题123</h1>---标题 <h2>这是标题123</h2>-- ...

  10. HTML调用PC摄像头【申明：来源于网络】

    HTML调用PC摄像头[申明:来源于网络] ---- 地址:http://www.oschina.net/code/snippet_2440934_55195 <!DOCTYPE html> ...