程序地带

Vue-Router实现左侧导航栏,右侧刷新局部内容


刚接触Vue,想实现点击左侧导航栏,右侧动态刷新的效果,需要使用vue-router,开始不太明白,看了看vue-router的官方文档,可以使用嵌套路由解决


相关代码如下:
<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 },
// ...其他子路由
]
}
]
})

原文地址: https://router.vuejs.org/zh/guide/essentials/nested-routes.html


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Gaozhengw/article/details/112689454

随机推荐

动态代理学习小结

动态代理学习小结

动态代理1.代理模式1.1什么是代理模式代理模式是指,为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而...

风之诗理工 阅读(397)

C++ ECS架构ForEach实现

最近参考unity的ecs架构,想写一个C++版本给自己的demo使用。在写到ForEach的时候,发现要想实现类似unity的ForEach还是要花点功夫...

隐士低手 阅读(136)

一种C语言的状态机

一、背景以前写状态机的思路都是ifelse或者switchcase,今天我们稍微把思路整理一下,把状态机的状态迁移,和事件触发管理的更直观一些。二、正题假设有...

蒙古战狼 阅读(385)

Java程序员成长为优秀的架构师呢?

Java程序员成长为优秀的架构师呢?

一、如何定义架构师Java架构师,首先要是一个Java程序员,熟练掌握使用各种框架,并知道它们实现的原理,Java虚拟机原理、调优,...

关注我学java 阅读(652)

测试级别和分类

一、测试级别分类级别分类:1.单元测试:软件测试中单元指的是组成软件最小的底层代码结构一般是:类、函数、组件(一般不会要求测试人员对源代码进行测...

吃肉的小妖精 阅读(156)

浏览器的渲染原理,重排与重绘

浏览器的渲染原理,重排与重绘

浏览器渲染原理浏览器下载完页面所有的资源后,就要开始构建DOM树,于此同时还会构建渲染树(RenderTree)。(其实在构建渲染树之前,和DO...

Smile Againゾ lei 阅读(114)