Vue中使用children实现路由的嵌套

相关Html:

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

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

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

</head>

<body>

  <div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

  </div>

  <template id="tmpl">

    <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: '#tmpl'

    }

    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: {},

      methods: {},

      router

    });

  </script>

</body>

</html>

Vue中使用children实现路由的嵌套的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. Vue中的组件及路由使用

    1.组件是什么        组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声 ...

  3. vue中另一种路由写法

    一个项目中一级菜单是固定的,二级及其以下的菜单是动态的,直接根据文件夹结构写路由 import Vue from 'vue' import Router from 'vue-router' impor ...

  4. Vue中添加新的路由并访问

    1.搭建好Vue脚手架(这里使用的版本是Vue2.0) 2.在代码编辑器(这里使用的是Sublime Text)打开项目文件夹 3.在文件目录src中的component下创建一个新的vue页面,写入 ...

  5. 064——VUE中vue-router之使用路由别名定制(alias)

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

  6. 【Vue中的坑】路由相同参数不同无法触发路由

    场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...

  7. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  8. vue中实现后台管理路由标签页

    <template> <section> <div class="navTabList el-tabs__nav-scroll" id="t ...

  9. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

随机推荐

  1. SpringMVC零碎笔记

    在web.xml里可以配置webapp的默认首页,格式如下: <welcome-file-list> <welcome-file>index.html</welcome- ...

  2. 20155327 2016-2017-4 《Java程序设计》第6周学习总结

    20155327 2016-2017-4 <Java程序设计>第6周学习总结 教材学习内容总结 理解流与IO 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两 ...

  3. qq强制聊天工具

    当你想和别人聊天, 别人有不理你的时候可以用上哦!!!特别是情人吵架的时候, 呵呵 复制下面的代码: @echo off title DIY-QQ强制聊天工具color 0a echo. echo.  ...

  4. nexus 参考文档

    参考文档: http://books.sonatype.com/nexus-book/reference/index.html E:\e\nexus\nexus-2.12.0-01\conf\nexu ...

  5. event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

    先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 eve ...

  6. android中Actionbar详解

    1.什么是Action BarAction Bar被认为是新版Android系统中最重要的交互元素,在程序运行中一直置于顶部,主要起到的作用在于:1)突出显示一些重要操作(如“最新”.“搜索”等)2) ...

  7. linux处理U盘中的资料-挂载-tar.gz软件安装-linux环境下软件的安装方式

    1. U盘插入linux一般会有以下反映 (1)/dev 的目录下,多出一个sdb的磁盘. 因为:目前系统中有两个硬盘, sda是原来的系统磁盘.sdb是插入的U盘. 其中:sdb1表示sdbU盘的一 ...

  8. Spring容器中bean的生命周期以及关注spring bean对象的后置处理器：BeanPostProcessor（一个接口）

    Spring IOC 容器对 Bean 的生命周期进行管理的过程: 1.通过构造器或工厂方法创建 Bean 实例 2.为 Bean 的属性设置值和对其他 Bean 的引用 3.将 Bean 实例传递给 ...

  9. 曲演杂坛--使用ALTER TABLE修改字段类型的吐血教训

    --===================================================================== 事件起因:开发发现有表插入数据失败,查看后发现INT类型 ...

  10. asp.net core 使用identityServer4的密码模式来进行身份认证（一）

    IdentityServer4是ASP.NET Core的一个包含OpenID和OAuth 2.0协议的框架.具体Oauth 2.0和openId请百度. 前言本博文适用于前后端分离或者为移动产品来后 ...