How to use routing in Vue to dynamically display and hide page elements?

WBOY

Release： 2023-07-21 15:39:15

Original

2966 people have browsed it

Vue is a popular front-end framework that provides an elegant way to build user interfaces. Vue routing is an important feature in the Vue framework. It allows us to jump and navigate between pages by changing the URL in a single-page application. In addition to this basic function, Vue routing can also be used to dynamically display and hide page elements. This article will introduce how to use Vue routing to achieve this function.

First, we need to install Vue routing. You can use the npm command to install it:

npm install vue-router

Copy after login

After the installation is complete, we can import Vue routing and related components in the entry file of the Vue project (usually main.js):

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

Copy after login

Connect Next, we need to define routes and corresponding components. In the root directory of the Vue project, create a new router folder and create an index.js file under the folder. Define routes and corresponding components in the index.js file. The example is as follows:

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/components/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('@/components/Contact.vue'),
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

Copy after login

In the above example code, we defined three routes: /home, /about and /contact, which correspond to three components respectively. Home.vue, About.vue and Contact.vue. Next, we need to introduce routing into the Vue instance:

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

Copy after login

In the above code, we add the router instance to the Vue instance and render the App.vue component in the render function.

Now, we have completed the routing settings. Next, we can use routing in the component to dynamically display and hide page elements.

In the component, we can use the tag to display the component corresponding to the route. It determines which component to display based on the path in the current URL. An example is as follows:

<template>
  <div>
    <h1>My App</h1>

    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

    <router-view></router-view>
  </div>
</template>

Copy after login

In the above code, we use the tag to create navigation links, each link corresponding to a route. When we click on the link, the path in the URL will change, and the tag will render the corresponding component.

In addition, we can also use the $route object in the component to control the display and hiding of the component based on the path of the current URL. An example is as follows:

<template>
  <div>
    <h1 v-if="$route.path === '/home'">Home</h1>
    <h1 v-if="$route.path === '/about'">About</h1>
    <h1 v-if="$route.path === '/contact'">Contact</h1>
  </div>
</template>

Copy after login

In the above code, we use the v-if directive to determine whether to display the corresponding