vue-router-3-嵌套路由
<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-嵌套路由的更多相关文章
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- vue router的嵌套使用与传值的query方式
嵌套路由 当我们不满足与 /home这种路由,而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤: ·创建对应的子组件,并且在路 ...
- vue之vue-router嵌套路由
1.定义路由 routes: [ { path: '/product', //第一层路由 name: 'product', component: Vproductcontent,//父组件渲染的是子组 ...
- vue入门--简单嵌套路由的一个路径小问题
假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue开发之基础路由
1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...
- 七. Vue Router详解
1. 认识路由 1.1 路由概念 路由是什么? 路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 --- 维基百科 路由器提供了两种机制:路由 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
随机推荐
- JAVA基础知识总结:二十二
一.反射机制 1.概念 反射机制指的是程序在运行的过程中,对于任意一个类,都能够知道这个类对应的所有的属性和方法:对于任意一个对象,都能够调用其中的任意的方法和属性,在Java中,把这种动态获取信息以 ...
- 第一个dubbo程序
Dubbo是一个高性能服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案,使得应用可通过高性能RPC实现服务的输出和输入功能,和Spring框架可以无缝集成. 作为一个 ...
- 响应式布局与bootstrap框架
原文 网页布局方式 1.固定宽度布局:为网页设置一个固定的宽度,通常以px做为长度单位,常见于PC端网页. 2.流式布局:为网页设置一个相对的宽度,通常以百分比做为长度单位. 3.栅格化布局:将网页宽 ...
- 【转】 详解C中volatile关键字
转自: http://www.cnblogs.com/yc_sunniwell/archive/2010/06/24/1764231.html volatile提醒编译器它后面所定义的变量随时都有可能 ...
- 转录调控实战 | 一文解决转录调控问题 | chIP-seq | ATAC-seq
做生物的想发文章怎么办?转录调控来解析(huyou)! 最简单的情形: 1. 我在研究一个非常重要的基因A,功能已经做得差不多了,现在想深挖,第一步就是想知道哪个转录因子调控这个基因A: 2. 我发现 ...
- 如何抓取Amazon大图
https://www.douban.com/note/277033391/ 進入到日本Amazon看到某些商品有預覽圖可以放大欣賞,當你想要右鍵下載卻發現只得到空白圖或白邊圖.縮圖.切割圖,究竟原圖 ...
- 说说secondarynamenode作用和配置
说说secondarynamenode作用 http://my.oschina.net/u/1464779/blog/289895 说说secondarynamenode的配置 hadoop2.X如何 ...
- android--------自定义控件 之 属性篇
上篇介绍了自定义控件的一个简单案例,本篇文章主要介绍如何给自定义控件自定义一些属性. Android 中使用自定义属性的一般步骤: 定义declare-styleable,添加attr 使用Typed ...
- CentOS6启动流程
CentOS6启动流程 1.加载BIOS的硬件信息,获取第一个启动设备 在通电之后,CentOS6会进行加电自检(Power On Self Test),这个过程主要是由BIOS完成的.在自检完毕,会 ...
- python记录_day10 动态传参 命名空间 作用域
一.动态传参 动态传参用到 *args 和 **kwargs ,*号表示接收位置参数,args是参数名:**表示接收关键字参数,kwargs是参数名 def chi(*food): print(foo ...