1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.    <head>
  5.      <meta charset="utf-8">
  6.      <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible"  content="ie=edge">
  8.      <title>Document</title>
  9.      <!--1.导入Vue的包-->
  10.      <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
  11.      <script src="../lib/vue-router-3.0.6.js"></script>
  12.    </head>
  13.  
  14.    <body>
  15.        <div id="app">
  16.        <router-link to="/account">Account</router-link>
  17.        <router-view></router-view>
  18.  
  19.        </div>
  20.  
  21.        <template id="tmp1">
  22.          <div>
  23.            <h1>这是 Account 组件</h1>
  24.  
  25.            <router-link to="/account/login">登录</router-link>
  26.            <router-link to="/account/register">注册</router-link>
  27.  
  28.            <router-view></router-view>
  29.  
  30.          </div>
  31.        </template>
  32.  
  33.        <script>
  34.  
  35.        //组件的模板对象
  36.         var account={
  37.          template:'#tmp1'
  38.      }
  39.  
  40.       var login={
  41.          template:'<h3>登录</h3>'
  42.      }
  43.  
  44.      var register={
  45.          template:'<h3>注册</h3>'
  46.      }
  47.  
  48.      var router=new VueRouter({
  49.        routes:[
  50.         {
  51.          path:'/account',
  52.          component:account,
  53.          //使用children 属性，实现子路由，同时，子路由的 path 前面，不要带 /，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
  54.          children:[
  55.          {path:'login',component:login},
  56.           {path:'register',component:register}
  57.          ]
  58.        },
  59.         // {path:'/account/login',component:login},
  60.         //  {path:'/account/register',component:register}
  61.        ]
  62.      })
  63.  
  64.            //创建 Vue 实例，得到 ViewModel
  65.            var vm =  new Vue({
  66.                el:'#app',
  67.          data:{
  68.            msg:''
  69.          },
  70.          methods:{},
  71.          router
  72.            });
  73.        </script>
  74.    </body>
  75.  </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. Java学习笔记-Java中的常用类

    Java中有很多类是很常用的,此处列举System,Runtime,Date,Calendar,Math System System:类中的方法和属性都是静态的 字段摘要 static PrintSt ...

  2. PAT(Advanced Level)1055.The World's Richest

    Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...

  3. Linux系列（11）：之bash进阶与数据流导向、管线命令

    1.万用字符与特殊字符 在bash的环境下有一个特别有用的功能,那就是万用字符!下面展示常见的万用字符: 1.万用字符 除了万用字符还有一些其他的特殊字符,接下来显示特殊字符. 2.特殊字符 2.数据 ...

  4. if(!ConnectDBProc(strCmd,m_dbUserName,m_dbPassword))

    https://wenku.baidu.com/view/826b3d426bec0975f565e204.html

  5. [SDOI2008]石子合并 题解

    题面 GarsiaWachs算法专门解决石子合并问题: 设一个序列是A[0..n-1],每次寻找最小的一个满足A[k-1]<=A[k+1]的k,那么我们就把A[k]与A[k-1]合并,并向前寻找 ...

  6. js排列组合

    /* 全排列主要用到的是递归和数组的插入 arr: 需要排列的数组 第一步:从里面取一个,创建一个新的数组,形式为二维,例如arr = [1,2,3]; 取出3(没有特殊要求,随便取一个),放入 te ...

  7. redis 学习(17) -- RDB

    redis -- RDB 什么是 RDB 经过RDB之后,redis会将内存中的数据创建一份快照到硬盘中,称为RDB文件(二进制) 当redis重新启动时,会加载硬盘中的RDB文件,加载到内存中完成数 ...

  8. maven工程下整合spring+mybatis报Mapped Statements collection does not contain value for spring-mybatis-user-get错误

    在整合spring+mybatis报了下面的错误: Mapped Statements collection does not contain value for spring-mybatis-use ...

  9. c# 获取屏幕图片

    Rectangle bounds = Screen.GetBounds(Screen.GetBounds(Point.Empty)); using (Bitmap bitmap = new Bitma ...

  10. 【原创】大叔问题定位分享（34）Spring的RestTemplate请求json数据后内容被修改

    先看代码 org.springframework.web.client.RestTemplate public RestTemplate() { this.messageConverters = ne ...