<!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. .net IIS MVC Rest api 跨域 PUT DELETE 404 无法使用问题解决方案

    一.WebConfig配置法(system.webServer 重点是 httpProtocol handlers) http://www.jinxuliang.com/blog/article/re ...

  2. db2 order by 利用索引

    ORDER BY 通常会有两种实现方法,一个是利用有序索引自动实现,也就是说利用有序索引的有序性就不再另做排序操作了.另一个是把结果选好之后再排序. 用有序索引这种,当然是最快的,不过有一些限制条件, ...

  3. react项目和next项目修改默认端口号

    creat-react-app生成的项目默认端口号是3000,如下可以更改: 在package.json中修改 "start":"react-scripts start& ...

  4. Maven项目出现Perhaps you are running on a JRE rather than a JDK?

    今天   换了一个IDE  然后 运行 maven的时候 报了一个 这个 错误 我记得以前 我遇到过   所以 把解决方法 记下来吧 原因 maven插件需要使用jdk 的  但是 eclipse默认 ...

  5. 升级 phpstud y中的 mysql 版本

    1.找到你 phpstudy 安装目录,找到 MySQL 文件夹 (我自己的实际目录  D:\pc\phpstudy\MySQL),关掉退出 phpstudy服务,删除 MySQL 文件夹里的文件,如 ...

  6. 教你如何用笔记本设置超快WIFI

    以win7为例 1.在主菜单运行框输入  cmd------->以管理员的身份运行 2.命令提示符中输入:netsh wlan set hostednetwork mode=allow ssid ...

  7. js设计模式（四）---迭代器模式

    定义: 迭代器模式是指提供一种方法,顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示,迭代器模式可以把迭代的过程从业务逻辑中分离出来,使用迭代器模式,即使不关心对象的内部构造,也可以按 ...

  8. POJ 1321 - 棋盘问题 - [经典DFS]

    题目链接:http://poj.org/problem?id=1321 Time Limit: 1000MS Memory Limit: 10000K Description 在一个给定形状的棋盘(形 ...

  9. Linux-003-Resource temporarily unavailable

    Jenkins构建任务向服务器发送war包时提示信息如下所示: 由上述信息可知通过SSH命令连接失败.通过Client连接服务器,提示信息如下: 提示信息说明资源暂时不可用. 原因一般是因为用户或应用 ...

  10. Python字符串拼接的6种方法（转）

    add by zhj: 对于多行字符串连接,第6种连接方法很方便,连接时不会添加额外的空格. 原文:http://www.cnblogs.com/bigtreei/p/7892113.html 1. ...