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 component is used to create navigation links, and the <router-view></router-view> component is used to display the corresponding components. On this basis, we can achieve the switching effect of tabs.

First, we create a <tabbar></tabbar> 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 <router-view></router-view> component to display the corresponding component, and use the <tabbar></tabbar> 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 <router-view></router-view>.

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!