好资源导航 » 文章资讯 » vue-router实现tab标签页（单页面）详解

vue-router实现tab标签页（单页面）详解

2023-09-23 01:47:05 54

vue-router是Vue.js官方的路由插件，适合用于构建标签页应用。Vue的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router会把各个组件渲染到正确的地方。

首先，.vue中的内容非常简单，创建标签，并指定路径，渲染路由匹配到的组件。

结构很简单，我们有一个账户页account，account中还包含两个标签页，分别是课程course和订单order。
在写路由的时候，需要注意页面间层级关系，开始我是这样写的：

importVuefrom'vue'
importRouterfrom'vue-router'
importAccountfrom...
importCourseListfrom...
importOrderListfrom...

Vue.use(Router)

exportdefaultnewRouter({
routes:[
{
path:'/account',
name:'account',
component:Account
},
{
path:'/my-course',
name:'course',
component:CourseList
},
{
path:'/my-order',
name:'order',
component:OrderList
}
]
})

这样做会使得点击时，跳转到新页面，而不是在中显示组件。
正确的路由应该这样写：

routes:[
{
path:'/account',
name:'account',
component:Account,
children:[
{name:'course',path:'course',component:CourseList},
{name:'order',path:'order',component:OrderList}
]
}
]

注册一个根路由account，将course和order注册为account中的子路由，和中to="account/course"对应。

刚开始做Vue，这个问题困扰了很久，特此记录。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程，进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue-router实现tab标签页（单页面）详解

热门推荐

随机推荐