<!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. python fullmatch函数

  2. Python PEP8标准

    1.编码 如无特殊情况,文件一律使用utf-8编码 如无特殊情况,文件头部必须添加# -*- coding:utf-8 -*- 标志 2.代码 统一使用四个空格缩进 每行代码不超过80个字符 自然语言 ...

  3. PHP学习(语言结构语句）

    switch case语句 for循环语句: foreach循环语句 常用于遍历数组,一般有两种使用方式:不取下标.取下标. (1)只取值,不取下标 <?php foreach (数组 as 值 ...

  4. Python编码---转自金角大王

    本节内容 编码回顾 编码转换 Python的bytes类型 编码回顾 在备编码相关的课件时,在知乎上看到一段关于Python编码的回答 这哥们的这段话说的太对了,搞Python不把编码彻底搞明白,总有 ...

  5. python三种导入模块的方法和区别

    方法一: import modname 模块是指一个可以交互使用,或者从另一Python 程序访问的代码段.只要导入了一个模块,就可以引用它的任何公共的函数.类或属性.模块可以通过这种方法来 使用其它 ...

  6. 云数据库RDS存储能力进化解析！

    数据库是企业IT系统的核心,其性能表现会直接影响整体业务系统的性能表现,而影响数据库性能因素包括系统架构设计.应用程序业务SQL语句.数据库参数优化配置.数据库运行的资源能力.系统架构设计和应用程序业 ...

  7. java读取properties文件总结

    一.java读取properties文件总结 在java项目中,操作properties文件是经常要做的,因为很多的配置信息都会写在properties文件中,这里主要是总结使用getResource ...

  8. iOS用同一个工程创建两个不同版本的应用

    http://www.cocoachina.com/ios/20150916/13324.html 如果同一个应用, 需要做一个带广告Lite版本, 一个不带广告的Pro版本. 那么问题来了, 该如何 ...

  9. Libevent：3创建event_base

    在使用Libevent函数之前,需要分配一个或多个event_base结构.每一个event_base都持有一个events的集合,并且可以检测那些events是激活的. 如果设置event_base ...

  10. vue中$bus的传参的坑

    今天在做项目的时候碰见一个坑就是B页面有个点击事件需要触发完然后跳转到A页面,接着页面跳转过去后再A页面的create生命周期中利用on监听事件的改变,接着赋值给data里面某个数据,但是奇怪的问题是 ...