<!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. 【Tensorflow】tensorboard

    tbCallBack = tf.keras.callbacks.TensorBoard(log_dir='./log' , histogram_freq=0, write_graph=True, wr ...

  2. linux下批量杀死进程

    ps aux|grep python|grep -v grep|cut -c 9-15|xargs kill -15 管道符“|”用来隔开两个命令,管道符左边命令的输出会作为管道符右边命令的输入.下面 ...

  3. Java正则表达式使用 | 叠加

    public class Test { public static void main(String[] args) { String s = "ni\nhao\nma he yi\nyon ...

  4. MySQL查询表与表字段的信息

    环境: Mysql数据库 库名:db_name 表名: table_name1 table_name2 查询一个里面所有表的信息: use information_scheam; select * f ...

  5. less的安装与用法

    1. node.js node.js是一个前端的框架 自带一个包管理工具npm node.js 的安装 官网:http://nodejs.cn/ 在命令行检验是否安装成功 打开cmd 切换到项目目录, ...

  6. laravel5.4将excel表格中的信息导入到数据库中

    本功能是借助 Maatwebsite\Excel 这个扩展包完成的,此扩展包的安装过程请参考上篇博文:http://www.cnblogs.com/zhuchenglin/p/7122946.html ...

  7. 关于 systemctl --user status 报错的问题

    关于 systemctl --user enable mpd 报错: Failed to connect to bus: No such file or directory 因为arch脚本中,sys ...

  8. ruby 基础知识 - Class 与 Module

    原文 1. 因為 Ruby 並沒有「屬性」(property/attribute)這樣的設計,要取用實體變數,需要另外定義的方法才行: class Cat def initialize(name, g ...

  9. C# 日期时间

    --DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 取当前年月日时分秒      currentTime=System. ...

  10. JavaScript基础知识（DOM）

    获取元素的方法 要操作谁,就要先获取谁: 获取元素 1.document.getElementById:通过ID名来获取元素 兼容性: 在IE8以下,会默认把name属性当做id来获取: docume ...