您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— 嵌套路由

《和小米一起学Vue.js》— 嵌套路由

[ 孤狼 | 2023-01-09 11:23:01 | Vue | 1016°C | 0条评论 ]

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下,URL 的片段通常对应于特定的嵌套组件结构,通过 Vue Router,你可以使用嵌套路由配置来表达这种关系。

要使用嵌套路由,需要先装备要使用的子组件。 例如: UserInfo 和 Userlist

<template>
<div>这里是用户信息页面</div>
</template>

<script>
export default{
}
</script>
<template>
<div>这里是用户列表页面</div>
</template>

<script>
export default{
}
</script>


然后,需要在上级的组件中(User),增加一个 <router-view></router-view> 来用于展示子组件的内容。

<template>
<div>
<h1>这里是user页面</h1>
<h2>当前的用户ID是:{{$route.params.uid}}</h2>

<router-link to="ulist">用户列表</router-link> |
<router-link to="uinfo">用户信息</router-link>
<router-view></router-view>
</div>
</template>


最后,需要将子页面路由信息嵌套到路由入口文件中的 User 路由中,需要在路由中配置 children 。

//使用懒加载
const UserView=()=> import('../views/User')
const UserInfo=()=> import('../views/UserInfo')
const UserList=()=> import('../views/UserList')

//配置路由
const routes = [
{
path: '/user/:uid', //对应的网址路径
name: 'user', //对应的路由名称
component: UserView,
//动态导入子路由列表
children: [
{
path: '',
redirect:"uinfo" //默认打开uinfo
},
{
path: 'uinfo',
component: UserInfo,
},
{
path: 'ulist',
component: UserList,
},
],
}
]



代码下载

下载地址:  密码:p5n9



转载请注明出处:http://gl.paea.cn/n.php?n=202
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索