How to implement redirection function in Vue Router

How to implement redirection function in Vue Router

Vue Router is the official routing manager of Vue.js, which can help us implement routing in single-page applications. control and management. Redirect is a function commonly used in route navigation. It can help us automatically jump to another specific route when the user accesses a certain route. This article will introduce how to implement redirection function in Vue Router and provide specific code examples.

First, make sure you have installed Vue.js and Vue Router, and configured Vue Router correctly in your project. If you have not installed Vue.js and Vue Router, you can install it according to the official documentation: https://router.vuejs.org/zh/

After configuring Vue Router, in your project root directory Create a folder, for example, redirects, to store redirection-related code files.

Create a new file in the redirects folder, for example, called redirects.js to store redirection rules and codes.

First, introduce Vue and Vue Router in redirects.js:

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

Vue.use(VueRouter)

Then, create a new Vue Router instance and define redirection rules:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/redirect1',
      redirect: '/redirect-target1'
    },
    {
      path: '/redirect2',
      redirect: '/redirect-target2'
    },
    // 其他路由配置...
  ]
})

In the above code, we defined two redirection rules. When the user accesses the /redirect1 path, it will automatically jump to the /redirect-target1 path; when When the user accesses the /redirect2 path, it will automatically jump to the /redirect-target2 path.

Finally, export the Vue Router instance for use in the project:

export default router

Now that we have completed the configuration of the redirection rules, we need to configure it in the project's entry file (such as main.js) uses this redirection rule.

Introduce the redirects.js file into the entry file of the project and add it to the Vue instance:

import Vue from 'vue'
import App from './App.vue'
import router from './redirects/redirects.js'

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

Now, we have applied the redirection rule In the project, when the user accesses the matching redirection path, it will automatically jump to the specified target path.

After completing the above steps, we can use the redirection function in the components of the project. Taking a simple page component as an example, assume we have two page components: Redirect1.vue and Redirect2.vue.

In the Redirect1.vue component, we can use the redirection function to automatically jump the user to the RedirectTarget1.vue component:

<template>
  <div>
    <h1>Redirect1</h1>
  </div>
</template>

<script>
export default {
  name: 'Redirect1',
  mounted() {
    this.$router.push('/redirect1')
  }
}
</script>

in Redirect2.vue In the component, you can also use the redirection function to automatically jump to the RedirectTarget2.vue component:

<template>
  <div>
    <h1>Redirect2</h1>
  </div>
</template>

<script>
export default {
  name: 'Redirect2',
  mounted() {
    this.$router.push('/redirect2')
  }
}
</script>

So far, we have completed the Vue Implement the redirection function in Router.

To summarize, to implement the redirection function in Vue Router, we need to configure the redirection rules first, then introduce Vue Router in the project entry file and add it to the Vue instance. Finally, use the $router.push method to jump in the component that needs to use redirection.

Hope this article can help you understand how to implement redirection function in Vue Router. I wish you good results using Vue Router!

The above is the detailed content of How to implement redirection function in Vue Router. For more information, please follow other related articles on the PHP Chinese website!