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

vue

router

155 浏览量更新于2023-03-16 评论收藏 45KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要为大家详细介绍了vue-router实现tab标签页的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参

考一下

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访

问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。

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

<router-link to="/account/course">我的课程</router-link>

<router-link to="/account/order">我的订单</router-link>

</p>

<router-view></router-view>

</div>

</template>

结构很简单，我们有一个账户页 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',

component: Account

{

path: '/my-course',

component: CourseList

{

path: '/my-order',

component: OrderList

}

]

})

这样做会使得点击 <router-link> 时，跳转到新页面，而不是在 <router-view> 中显示组件。

正确的路由应该这样写：

routes: [

{

path: '/account',

component: Account,

children: [

{name: 'course', path: 'course', component: CourseList},

{name: 'order', path: 'order', component: OrderList}

]

}

]

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

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38740827

粉丝: 7
资源: 947

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

基于vue多tab页实现

vue 页面tabs切换,替换iframe

vue elementUI使用tabs与导航栏联动

Could not find a declaration file for module 'vue-router'. 'D:/uic/sdw3/111/node_modules/vue-router/dist/vue-router.cjs.js' implicitly has an 'any' type. Try `npm i --save-dev @types/vue-router` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-router';`ts(7016)

我已经引入了vue-router但是还是报：Module not found: Error: Can't resolve 'vue-router' in 'D:\demo\vue-demo08\src\router'

vue-router import 报错

如何全局卸载vue-router

Vue-Router介绍

vue-router安装失败

vue-router配置html页面

vue-router安装命令

使用代码总结vue-router的作用以及使用方法

vue2使用哪个版本的vue-router

vue-router离线文档

配置Vue-router的作用

总结vue-router的使用方法

试NPM安装vue-router

vue静态页面如何使用vue-router

vue2的vue-router

如何安装vue-router'

会员权益专享

最新资源