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/foo 时,User 的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的 子路由:

const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功,
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome }, // ...其他子路由
]
}
]
})

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

  1. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

  2. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  3. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  4. VUE中嵌套路由

    官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...

  5. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

  6. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  7. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  8. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  9. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  10. vue(19)嵌套路由

    嵌套路由 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由.项目结构如下: ...

随机推荐

  1. 结构型设计模式之外观模式(Facade)

    结构 意图 为子系统中的一组接口提供一个一致的界面,F a c a d e 模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 适用性 当你要为一个复杂子系统提供一个简单接口时.子系统往往因 ...

  2. [ CodeVS冲杯之路 ] P1214

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1214/ 这道题类似于最长区间覆盖,仅仅是将最长区间改成了最多线段,我们贪心即可 先将线段直接右边-1,然后按左边为第一 ...

  3. 《Linux命令行与shell脚本编程大全 第3版》创建实用的脚本---11

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  4. android 研究的环境搭建、高效工具、网站资源

    =================  2015 年 10 月 14 号 更新 著名的android开源社区xda有一个帖子,详细描述了android开发和研究环境的初始搭建过程: http://for ...

  5. UVA 10940 Throwing cards away II

    题意略: 先暴力打表发现规律 N=1 ans=1N=2 ans=2N=3 ans=2N=4 ans=4N=5 ans=2N=6 ans=4N=7 ans=6N=8 ans=8N=9 ans=2N=10 ...

  6. Zabbix监控服务器异常IP登录

    保存下面的脚本到任意路径 名字.py 修改属组和权限: chown zabbix:zabbix * chmod 755 * 演示的路径为:/usr/local/zabbix/scripts/ # -* ...

  7. centos6.5 网卡服务开机自动启动

    今天打开许久没用的centos之后,发现网络服务器不可用,通过service network restart 依然无法使用,简单记录一下处理过程: 1.通过setup 命令查看Network conf ...

  8. Laravel5.1忽略Csrf验证的方法

    在/App/Http/middleware/VerifyCsrfToken.php 文件的protected $except里面加入路由地址

  9. postgres基础知识

    postgres是连接到具体的库:   ./psql -U postgres  不指定库,默认就是用户名的同名库   ./psql -d chat -U postgres  指定chat库   pos ...

  10. Redis数据类型、两种模型、事务、内部命令

    1.redis数据类型 a.字符串,使用场景:常规key-value缓存应用 set name lixiang get name append name 123 # 字符串追加 mset key va ...