How to use Vue Router to implement dynamic routing tabs?

How to use Vue Router to implement dynamic routing tabs?

Vue Router is the officially recommended routing management plug-in for Vue.js. It provides a simple and flexible way to manage application routing. In our projects, sometimes we need to implement the function of switching multiple pages in the same window, just like tabs in a browser. This article will introduce how to use Vue Router to implement such a dynamic routing tab.

First, we need to install the Vue Router plug-in. You can use the npm or yarn command to install:

npm install vue-router

or

yarn add vue-router

After the installation is complete, create a router folder in the root directory of the project, and create an index under the folder .js files are used to define routing-related configurations. In the index.js file, we need to introduce Vue and Vue Router, and create a new Vue Router instance:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

Next, in our Vue component, we can use d10735b1768e46686ef16d3b479f7b42 component is used to create navigation links, and the 975b587bf85a482ea10b0a28848e78a4 component is used to display the corresponding components. On this basis, we can achieve the switching effect of tabs.

First, we create a 9f9c5f23aad9338ef6fb4120b538b879 component as the navigation bar to display the tab page:

<template>
  <div>
    <router-link 
      v-for="tab in tabs"
      :key="tab.name"
      :to="tab.to"
      active-class="active"
      class="tab-item"
    >
      {{tab.title}}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: '首页', to: '/' },
        { title: '新闻', to: '/news' },
        { title: '关于', to: '/about' }
      ]
    }
  }
}
</script>

<style scoped>
.tab-item {
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.active {
  background-color: #eee;
}
</style>

Then, in our routing configuration file index.js , we can configure the corresponding routes and associate them with components. We can set a unique name for each navigation link and associate its routing path with the corresponding component:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/news',
      name: 'News',
      component: () => import('@/views/News.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue')
    }
  ]
})

export default router

Finally, in our root component App.vue, we can use 975b587bf85a482ea10b0a28848e78a4 component to display the corresponding component, and use the 9f9c5f23aad9338ef6fb4120b538b879 component in the navigation bar to achieve the tab switching effect:

<template>
  <div id="app">
    <tab-bar></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  components: {
    TabBar
  }
}
</script>

Through the above Configuration, we can achieve a tab-like effect in the Vue application. When we click on the navigation link, Vue Router will find the corresponding component based on the routing configuration and display it in 975b587bf85a482ea10b0a28848e78a4.

To sum up, with the powerful functions of Vue Router, we can easily implement dynamic routing tabs. By flexibly configuring routing, we can achieve rich and diverse page switching effects in Vue applications, bringing a better interactive experience to users.

The above is the detailed content of How to use Vue Router to implement dynamic routing tabs?. For more information, please follow other related articles on the PHP Chinese website!