<!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 路由的嵌套使用的更多相关文章

  1. Vue 路由的嵌套

    1.配置路由 const routes = [ { path: '/User', component: User, children: [{ path: 'OP1', component: OP1 } ...

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

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. Vue中路由的嵌套

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  4. Vue路由嵌套

    Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...

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

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

  7. vue.js_11_路由的2中参数传递和路由的嵌套

    1.以?的形式传递参数   <router-link to="/login?id=10&name=zs">登录</router-link> 发送参数 ...

  8. vue 路由缓存 路由嵌套 路由守卫 监听物理返回

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...

  9. vue路由-动态路由和嵌套路由

    一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...

随机推荐

  1. 统计Linux下的CPU状态信息

    def cpu(): all_cpus=[] with open('e:/cpu.txt') as f: core={} for line in f.readlines(): ab=line.spli ...

  2. 存储过程调用http 服务

    --sql 服务器设置 --启动 OLE Automation Proceduressp_configure 'show advanced options', 1;   --此选项用来显示sp_con ...

  3. 【水滴石穿】react-native-ble-demo

    项目的话,是想打开蓝牙,然后连接设备 点击已经连接的设备,我们会看到一些设备 不过我这边在开启蓝牙的时候报错了 先放作者的项目地址: https://github.com/hezhii/react-n ...

  4. Spring_JDBC连接

    1.导入jarbao 2.创建pojo,dao,Impl package com.tanlei.pojo; public class Department { private Long deptId; ...

  5. java通过实体类组装报文

    条件: 1.实体类字段名 首字母小写(java规范),再通过报文的需求,填充的时候做对应修改即可(正常报文首字母是大写的)! 2.假如xml标签首字母是小写,那么实体类就给大写,首字母是大写,那么实体 ...

  6. Directx11教程(52) 实例(instancing)的简单应用

    原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...

  7. iOS9 CASpringAnimation 弹簧动画详解

    http://blog.csdn.net/zhao18933/article/details/47110469 1. CASpringAnimation iOS9才引入的动画类,它继承于CABaseA ...

  8. 洛谷2050 BZOJ2897美食节题解

    放个链接 BZ链接 其实这题就是修车的加强版,做法差不多,还是对于每个厨师进行拆点 可是这样强行建图跑网络流会T飞 我们发现,如果一个厨师没有做倒数第x到菜,他一定不会做倒数第x+1到菜 我们的每次增 ...

  9. HDU 4217

    点击打开题目链接 题型就是数据结构.给一个数组,然后又k次操作,每次操作给定一个数ki, 从数组中删除第ki小的数,要求的是k次操作之后被删除的所有的数字的和. 简单的思路就是,用1标记该数没有被删除 ...

  10. cocos2dx 2.2.3在Windows 7 64bit上搭建开发环境

    最终弄完了cocos2dx 2.2.3在windows 7 64bit上的环境搭建,过程比較揪心.揪心的主要原因还是引擎的开发人员和官方文档的写作者都是偏爱MAC OS的,所以官方文档中的安装方法是以 ...