<div id="app">
<router-view></router-view>
</div> const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
} const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
},
// 当 /user/:id 匹配成功,设置的空路由
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
]
}
]
})

vue-router-3-嵌套路由的更多相关文章

  1. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  2. vue router的嵌套使用与传值的query方式

    嵌套路由 当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤: ·创建对应的子组件,并且在路 ...

  3. vue之vue-router嵌套路由

    1.定义路由 routes: [ { path: '/product', //第一层路由 name: 'product', component: Vproductcontent,//父组件渲染的是子组 ...

  4. vue入门--简单嵌套路由的一个路径小问题

    假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. Vue开发之基础路由

    1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...

  9. 七. Vue Router详解

    1. 认识路由 1.1 路由概念 路由是什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 --- 维基百科 路由器提供了两种机制:路由 ...

  10. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

随机推荐

  1. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

  2. 如何有效地使用t-SNE | How to Use t-SNE Effectively

    熟练使用PCA和tSNE,彻底理解底层的原理是非常有必要的. 参考:How to Use t-SNE Effectively Real-time tSNE Visualizations with Te ...

  3. Vue Authentication And Route Handling Using Vue-router(详解)

    英文原文  (本文原出处),本博在原文的基础上,进一步分析代码的结构和解释代码. git 代码 创建一个app:  vue-router-auth 本文详解了如何使用vue-router建立路由记录对 ...

  4. Rest_framework 和路由配置(一)

    简介 Django REST framework是一个建立在Django基础之上的Web 应用开发框架,可以快速的开发REST API接口应用. Rest_framework 核心思想: 缩减代码. ...

  5. 00-自测5. Shuffling Machine

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  6. 『TensorFlow』第二弹_线性拟合&神经网络拟合_恰是故人归

    Step1: 目标: 使用线性模拟器模拟指定的直线:y = 0.1*x + 0.3 代码: import tensorflow as tf import numpy as np import matp ...

  7. mysql命令查询

    含义 命令 查看gtid是否开启 show variables like '%gtid%';  查看只读信息 show global variables like "%read_only%& ...

  8. hadoop常见面试题

    Q1.什么是 Hadoop? Hadoop 是一个开源软件框架,用于存储大量数据,并发处理/查询在具有多个商用硬件(即低成本硬件)节点的集群上的那些数据.总之,Hadoop 包括以下内容: HDFS( ...

  9. element中使用button会刷新一遍页面

     会刷新:   <el-form-item> <button @click="register('form')" class="submitBtn&qu ...

  10. P2756 飞行员配对方案问题

    题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另1名是外 ...