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

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

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);

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;

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');

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>

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>

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

tag based on the path of the current URL.

Through the above sample code, we can see how to use Vue routing to dynamically display and hide page elements. By controlling the path of the URL, we can jump and navigate between different pages, and control the display and hiding of components based on the path of the current URL. This provides us with great convenience in developing flexible front-end interfaces.

The above is the detailed content of How to use routing in Vue to dynamically display and hide page elements?. For more information, please follow other related articles on the PHP Chinese website!