<!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. oozie调度sqoop Job 数据库密码无法保存

    问题描述 通过oozie调度sqoop作业时,需要输入数据库作业密码,但在sqoop元数据服务配置密码后,过一段时间会失效. 解决方法 将数据库密码写入HDFS文件,通过配置Sqoop job,实现传 ...

  2. idea创建maven SSM项目

    maven配置 ➜ ~ cd /Applications/IntelliJ IDEA.app/Contents/plugins/maven/lib/maven3/conf ➜ conf vim set ...

  3. 21备忘录模式Memento

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

  4. Centos7.6 安装DNS服务器

    Centos7 安装 DNS 服务器 1 需求 需要在内部局域网安装一台域名服务器,让内网的机器通过此域名服务器解析IP地址: 2 设备 A TPLink路由器,型号 TL-WDR6500: B 准备 ...

  5. Elasticsearch学习之有用博客

    推荐阅读:1.阿里:https://elasticsearch.cn/article/61712.滴滴:http://t.cn/EUNLkNU3.腾讯:http://t.cn/E4y9ylL4.携程: ...

  6. Go VSCode配置编译task

    菜单栏Tasks->Configure Tasks { "version": "2.0.0", "tasks": [ { " ...

  7. Scala 中方法扩展实践

    前言 这个名字不知道取得是否合适,简单来说要干的事情就是给某个类型添加一些扩展方法,此场景在各种语言中都会用到,比如 C# 语言,如果我们使用一个别人写好的类库,而又想给某个类库添加一些自己封装的方法 ...

  8. js中typeof与instanceof用法

    今天写JS代码,遇到动态生成多个名称相同的input复选按钮 需要判断其是否是数组,用到了if (typeof(document.MapCheckMgr.checkid)!="undefin ...

  9. 基于nmap扫描结果的端口爆破工具:BrutesPray

      大家搞内网或者C段渗透测试的时候可能遇到很多时候需要对大批的主机进行精确爆破,这时候BruteSpray就派上用场了. BruteSpray是一款基于nmap扫描输出的gnmap/XML文件.自动 ...

  10. swust oj 962

    括号匹配问题 1000(ms) 65535(kb) 3045 / 13375 假设表达式中允许包含两种括号:圆括号和方括号.编写一个算法判断表达式中的括号是否正确配对. 输入 由括号构成的字符串,包含 ...