<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

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

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

     <script src="../lib/vue-router-3.0.6.js"></script>

   </head>

   <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>

       <script>

       //组件的模板对象

        var account={

         template:'#tmp1'

     }

      var login={

         template:'<h3>登录</h3>'

     }

     var register={

         template:'<h3>注册</h3>'

     }

     var router=new VueRouter({

       routes:[

        {

         path:'/account',

         component:account,

         //使用children 属性，实现子路由，同时，子路由的 path 前面，不要带 /，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址

         children:[

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

          {path:'register',component:register}

         ]

       },

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

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

       ]

     })

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:''

         },

         methods:{},

         router

           });

       </script>

   </body>

 </html>

第七章 路由 77 路由-使用children属性实现路由嵌套的更多相关文章

  1. Vue学习笔记【28】——Vue路由（使用 children 属性实现路由嵌套）

    使用 children 属性实现路由嵌套   <div id="app">    <router-link to="/account"> ...

  2. 第七章 路由 72 路由-路由redirect重定向的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 第七章 路由 71 路由-router-link的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第七章 路由 70 路由-vue-router的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第七章移动互联网与移动IP

    第七章移动互联网与移动IP 本章延续前几章节,对该章节内容进行归纳总结. 文章中的Why表示产生的背景,也就是说为什么会产生该技术,What表示该技术是什么,How表示该技术是如何使用的.以下将用字母 ...

  6. 【黑金原创教程】【TimeQuest】【第七章】供源时钟与其他

    声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...

  7. [深入理解Android卷一全文-第七章]深入理解Audio系统

    由于<深入理解Android 卷一>和<深入理解Android卷二>不再出版,而知识的传播不应该由于纸质媒介的问题而中断,所以我将在CSDN博客中全文转发这两本书的全部内容. ...

  8. Vue实战狗尾草博客后台管理系统第七章

    Vue实战狗尾草博客后台管理平台第七章 本章内容为借助模块化来阐述Vuex的进阶使用. 在复杂项目的架构中,对于数据的处理是一个非常头疼的问题.处理不当,不仅对维护增加相当的工作负担,也给开发增加巨大 ...

  9. 第七章、Ajango自带auth模块

    目录 第七章.Ajango自带auth模块 一.什么是auth auth是django自带的用户认证模块 二.auth模块的常用方法 三.拓展默认的auth_user表 第七章.Ajango自带aut ...

随机推荐

  1. 【计算机视觉】OpenCV之GPU与OpenCL的相关内容说明

    1 扩展库简介OpenCV(Open Source Computer Vision Library)是一个致力于实时处理计算机视觉问题的开源库.它最初由Intel公司开发,以GPL许可协议发布,后来由 ...

  2. 【FFMPEG】各种音视频编解码学习详解 h264 ，mpeg4 ，aac 等所有音视频格式

    目录(?)[-] 编解码学习笔记二codec类型 编解码学习笔记三Mpeg系列Mpeg 1和Mpeg 2 编解码学习笔记四Mpeg系列Mpeg 4 编解码学习笔记五Mpeg系列AAC音频 编解码学习笔 ...

  3. Laravel从模型中图片的相对路径获取绝对路径

    在模型product.php中增加以下方法.数据库图片字段为image.存储的图片相对路径 public function getImageUrlAttribute() { // 如果 image 字 ...

  4. 小记--------spark的Master主备切换机制原理分析及源码分析

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABfEAAAJwCAYAAAAp7ysfAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw

  5. 【LOJ】#3014. 「JOI 2019 Final」独特的城市（长链剖分）

    LOJ#3014. 「JOI 2019 Final」独特的城市(长链剖分) 显然我们画一条直径,容易发现被统计的只可能是直径某个距离较远的端点到这个点的路径上的值 用一个栈统计可以被统计的点,然后我们 ...

  6. Netty的那些”锁”事

    Netty锁事的五个关键点: ① 在意锁的对象和范围  --> 减少粒度 ②  注意锁的对象本身大小   --> 减少空间占用 ③ 注意锁的速度 --> 提高速度 ④不同场景选择不同 ...

  7. strCmd.Format("delete FROM userTable where name = '%s'", name);

    string.Format("select * from 数据库表 where 用户名='%s' and 密码='%s' ",m_1,m_2); 把[m_1]和[m_2]的值按照[ ...

  8. thinkPHP连接数据库报错：PDOException in Connection.php line 295

    跑去网上找了N多方法来尝试,重装apache.mysql.安装集成软件都试过了.错误一样. 后来细细分析,PDOException in Connection指的不就是PDO异常吗? 然后去了解了一些 ...

  9. 牛客 158D a-贝利福斯数

    将所有形如ax+1的数称为a-贝利福斯数,其中x是正整数.一个a-贝利福斯数是a-贝利福斯素数,当且仅当它不能被分解成两个a-贝利福斯数的积.现在给出a,n,问有多少个 ≤ n的a-贝利福斯数可以被分 ...

  10. GCN代码分析 2019.03.12 22:34:54字数 560阅读 5714 本文主要对GCN源码进行分析。

    GCN代码分析   1 代码结构 . ├── data // 图数据 ├── inits // 初始化的一些公用函数 ├── layers // GCN层的定义 ├── metrics // 评测指标 ...