<!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. loadrunner录制脚本时登录密码转md5

    在录制用户注册登录脚本时,常常会遇到web程序对用户密码进行加密处理.在很多时候采用的加密方式为MD5. 这时有两种处理方式: 一.所有用户采用同一密码 例如:每个用户名的密码都为e10adc3949 ...

  2. Spring使用JDBC配置具名参数

    好处:若有多个参数,则不用再去对应位置?,直接对应参数名,便于维护 缺点:较为麻烦 使用具名参数时可以使用以下的方法 好处,通过实现类BeanPropertySqlParameterSource之间传 ...

  3. 【linux配置】虚拟机配置静态IP地址

    使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...

  4. 高效整洁CSS代码原则 (下)

    6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...

  5. Leetcode720.Longest Word in Dictionary词典中最长的单词

    给出一个字符串数组words组成的一本英语词典.从中找出最长的一个单词,该单词是由words词典中其他单词逐步添加一个字母组成.若其中有多个可行的答案,则返回答案中字典序最小的单词. 若无答案,则返回 ...

  6. Hashkell 第一篇

    心情极差.................. 无事可做,其实是没心情去做事情,只好又翻起了haskell入门 记下几点,以备查询: 1. 函数名首字符是不可以大写的, 而且名称中可以有单引号,这也是合 ...

  7. R语言Switch语句

    R语言Switch语句 switch语句允许一个变量值的列表来平等进行测试.每个值被称为一个条件(情况),变量被接通检查每个条件(情况). 语法 在R语言中创建switch语句的基本语法是: 以下规则 ...

  8. XSD 命令及 WSDL 命令

    [XSD] 方法一:通过Xsd2Code工具生成相应代码(制作XSD工具有:Altova XMLSpy) 方法二:通过XSD命令生成相应代码 XML 架构定义 (Xsd.exe) 工具从 XDR.XM ...

  9. 使用JS如何消除一个数组里重复的元素

    JS: var arrData = [1,3,5,7,7,8,9,3,10,8,"sdsdsds","sss","ffff","s ...

  10. 2019.10.17beta

    import socket import subprocess import os server = socket.socket() server.bind( ('127.0.0.1',8888) ) ...