这篇文章主要为大家详细介绍了vue-router实现tab标签页的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。
首先，.vue中的内容非常简单，创建标签，并指定路径，渲染路由匹配到的组件。
<div id="account"> <p class="tab"> <!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- 默认会被渲染成一个 `` 标签 -->我的课程<!-- 注意这里的路径，course和order是account的子路由 -->我的订单</p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --></div>
结构很简单，我们有一个账户页 account，account 中还包含两个标签页，分别是课程 course 和订单 order。
在写路由的时候，需要注意页面间层级关系，开始我是这样写的：
import Vue from 'vue' import Router from 'vue-router' import Account from ... import CourseList from ... import OrderList from ... Vue.use(Router) export default new Router({ 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本文来源gaodai$ma#com搞$$代**码)网8，这个问题困扰了很久，特此记录。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程，进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue-router实现tab标签页（单页面）详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue-router实现tab标签页（单页面）详解
转载请注明原文链接：vue-router实现tab标签页（单页面）详解
