请使用Vue路由相关知识动手实现点击Tab栏切换展示内容。 1) 创建主页面,用来展示页面内容。 2) 该页面有三个链接,分别是“待付款”“待发货”“待收货”页面,在每个链接页面单独写出相应的内容,页面效果如下图所示。
时间: 2024-05-07 08:22:41 浏览: 10
首先需要安装Vue和Vue Router,可以通过以下命令进行安装:
```
npm install vue vue-router --save
```
接着,创建一个Vue实例,并在其中引入Vue Router和三个子组件:
```html
<template>
<div>
<nav>
<ul>
<li>
<router-link to="/pending-payment">待付款</router-link>
</li>
<li>
<router-link to="/pending-shipping">待发货</router-link>
</li>
<li>
<router-link to="/pending-receiving">待收货</router-link>
</li>
</ul>
</nav>
<router-view></router-view>
</div>
</template>
<script>
import VueRouter from 'vue-router'
import PendingPayment from './PendingPayment.vue'
import PendingShipping from './PendingShipping.vue'
import PendingReceiving from './PendingReceiving.vue'
const router = new VueRouter({
routes: [
{ path: '/pending-payment', component: PendingPayment },
{ path: '/pending-shipping', component: PendingShipping },
{ path: '/pending-receiving', component: PendingReceiving }
]
})
export default {
router
}
</script>
```
在上述代码中,通过`router-link`标签实现了Tab栏的展示,并通过`router-view`标签实现了Tab栏切换后对应内容的展示。同时,也定义了Vue Router实例并注册了三个子组件。
接着,需要定义每个子组件的具体内容。以`PendingPayment.vue`为例:
```html
<template>
<div>
<h1>待付款</h1>
<p>这里是待付款页面的内容。</p>
</div>
</template>
```
其他两个子组件的内容类似。
最后,在入口文件中,将Vue实例挂载到一个DOM节点上:
```html
<!DOCTYPE html>
<html>
<head>
<title>Tab栏切换展示内容</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/bundle.js"></script>
</body>
</html>
<script>
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
</script>
```
这样,就完成了基于Vue Router的Tab栏切换展示内容的功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)