VUE router-view 页面布局 (嵌套路由+命名视图)
嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router
,使用嵌套路由配置,就可以很简单地表达这种关系。
接着上节创建的 app:
<div id="app"> <router-view></router-view> </div>
const User = {template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })
这里的 <router-view>
是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套 <router-view>
。例如,在 User
组件的模板添加一个 <router-view>
:
const User = {template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` }
要在嵌套的出口中渲染组件,需要在 VueRouter
的参数中使用 children
配置:
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 } ] } ] })
要注意,以 /
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现,children
配置就是像 routes
配置一样的路由配置数组,所以呢,你可以嵌套多层路由。
此时,基于上面的配置,当你访问 /user/foo
时,User
的出口是不会渲染任何东西,这是因为没有匹配到合适的子路由。如果你想要渲染点什么,可以提供一个 空的 子路由:
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功, // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome }, // ...其他子路由 ] } ] })
命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar
(侧导航) 和 main
(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view
没有设置名字,那么默认为 default
。
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components
配置 (带上 s):
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
以上案例相关的可运行代码请移步这里。
#嵌套命名视图
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view
组件。我们以一个设置面板为例:
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
Nav
只是一个常规组件。UserSettings
是一个视图组件。UserEmailsSubscriptions
、UserProfile
、UserProfilePreview
是嵌套的视图组件。
注意:我们先忘记 HTML/CSS 具体的布局的样子,只专注在用到的组件上
UserSettings
组件的 <template>
部分应该是类似下面的这段代码:
<!-- UserSettings.vue -->
<div> <h1>User Settings</h1> <NavBar/> <router-view/> <router-view name="helper"/> </div>
嵌套的视图组件在此已经被忽略了,但是你可以在这里找到完整的源代码
然后你可以用这个路由配置完成该布局:
{path: '/settings',// 你也可以在顶级路由就配置命名视图 component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] }
一个可以工作的示例的 demo 在这里。
https://jsfiddle.net/22wgksa3/8174///**********************************html************************
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Nested Named Views</h1>
<router-view></router-view>
</div>
//*****************************js*********************
const UserSettings = {
template: `
<div class="us">
<h2>User Settings start</h2>
<router-view ></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</br>
<h2>User Settings End</h2>
</div>
`
}
const Foo = { template: '<h2>pagecontent</h2>' }
const Bar = { template: '<h2>sidebar</h2>' }
const Baz = { template: '<h2>navbar</h2>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
// You could also have named views at tho top
component: UserSettings,
children: [
{
path: '',
components: {
default: Baz,
a: Bar,
b: Foo
}
}
]
}
]
})
new Vue({
router,
el: '#app'
})
//****************************************效果如下*********************
Nested Named Views
- /
User Settings start
navbar
sidebar
pagecontent
User Settings End
转载于:https://www.cnblogs.com/h2zZhou/p/9636283.html
VUE router-view 页面布局 (嵌套路由+命名视图)相关推荐
- 解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页
解决Vue history模式下使用嵌套路由打包部署后刷新页面为空白页 前言 问题分析 问题解决 结语 前言 众所周知,Vue路由有两种模式,默认hash模式,这种模式下url上会带"#&q ...
- vue router返回到指定的路由
vue router返回到指定的路由 一.项目场景 二.问题描述 三.原因分析 四.解决方案 一.项目场景 项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) ...
- Vue Router 命名路由、(嵌套)命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- Vue项目构造页面布局
这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 的视频再自己动手进行实践的 Element plus 提供了很多页面的布局,Element plus 为了方便开发人员使用 ...
- Vue第二部分(4): 嵌套路由和路由传参
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.当我们路由到某一个组件后,还经常需要在该组件中继续路由到其子组件,这就需要使用Vue的嵌套路由.比如:当我们路由到登录组件后,又分为手机验 ...
- vue+router 404页面制作
文章目录 效果 一.创建404界面 二.设置router 1.在router中添加 2.main.js中挂载router 效果 当访问不存在的页面时则会跳转至404页面 一.创建404界面 创建err ...
- Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
- Vue+Vue Router+Vuex页面演示
Vue+Vue Router+Vuex简单页面演示 1.目录结构(使用vue-cli创建) 2.编写代码 src/router/index.js import Vue from "vue&q ...
- Vue源码 Vue Router(三)matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结 单步调试参 ...
- vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
最新文章
- Ubuntu16.04 pip3 install 报错 working_set.find(moduleOrReq) or require(str(moduleOrReq))[0]
- 跌宕中,特斯拉拿下上海工厂,给蔚来们留下不到两年窗口期
- 通过rsync+inotify实现数据的实时备份
- “团队禁止使用Lombok”,被我狠狠的反驳了!
- vmware-vmx.exe无法结束进程_?进程的状态转换
- MATLAB下数组随机打乱顺序的方法
- java 不规则图形_java 根据点画不规则封闭图形
- R语言不止可以做数据分析,还可以变着方法玩出花
- oracle 12C 静默安装
- IOS端APP测试日志查看方法
- Android应用源码基于安卓的个人隐私监控项目
- 将markdown 文件渲染 mhtml 的方式
- 使用 OpenCV 在 Python 中检测图像中的形状
- Python爬取10529条《三十而已》热评,看看大家都说了些啥
- Win10同一路由器下共享打印机
- rtmp直播拉流安卓开发
- Android,iOS,Java,C#,C++,PHP,大数据等学习资料干货分享
- android 相对布局 靠右,Android开发RelativeLayout相对布局的属性
- Unity商店下载的文件保存路径?
- 溯光 (TrackRay) 渗透测试框架
热门文章
- DP之石子堆合并问题
- 数据结构回文数c语言,数据结构算法(字符串转整数和回文数)
- javascript 面向对象的理解、数据属性的特征,基本数据类型、三大引用类型,方法
- Centos7 Kubernetes(k8s) 开发服务器(单服务器)部署 prometheus 监控
- 跨境电商系统的一个架构演进
- 阶段3 3.SpringMVC·_03.SpringMVC常用注解_1 RequestParam注解
- 阶段3 1.Mybatis_09.Mybatis的多表操作_2 完成account表的建立及实现单表查询
- 动态规划练习合集(c++)
- 【BZOJ5100】[POI2018]Plan metra 构造
- 博弈论:寻找先手必胜策略——Grundy值