How to implement jump in vue router

Vue is one of the most popular front-end frameworks currently. It provides many tools to help developers develop web applications more quickly and simply. The most commonly used one is Vue Router. Vue Router is the official routing manager of Vue.js, which can easily implement component switching in SPA applications (single page applications). So this article will introduce in detail how Vue Router implements jump.

1. Basic concepts of Vue Router

Vue Router is the official routing manager based on Vue.js. It separates various page components through routing, and the separated components can be managed and used more flexibly. Among them, Vue Router has the following important concepts:

1. Route

Route represents the path of the page. Accessing different routes can display different pages or components. Routes can contain dynamic parameters, and we can use these parameters to control page behavior, component display effects, etc.

2. Router

Router is an instance in Vue.js, used to manage routing of the entire page. We can use routers to switch routes, monitor route changes, and other operations.

3. Routing component

The routing component is the various components we want to display in the routing, such as login page, homepage, user page, etc.

4. Routing view

The routing view is a component, its function is to dynamically display the corresponding components when the routing changes.

2. Three ways to jump in Vue Router

In Vue Router, we can jump in the following three ways:

1. Declarative Navigation

Use the router-link tag to achieve jump, which can convert the user's click event into routing conversion in the program. Using declarative navigation avoids some of the problems of directly manipulating URLs and using tags.

Code example:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

2. Programmatic navigation

Call the $router object in the event method and use the push or replace method to jump to the specified page. Programmatic navigation can be used to easily control route jump behavior, and the $route object can be used to access route parameters and handle flexibly when making jumps.

Code example:

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    toHome(){
      this.$router.push('/')
    },
    toAbout(){
      this.$router.push('/about')
    }
  }
}
</script>

3. Redirect

Redirect means that the route jumps to another page before jumping to the specified page. . We can use the redirect method to implement redirection, which can omit some unnecessary intermediate steps and directly access the page we need.

Code example:

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3. Vue Router parameter passing

In the development of web applications, we often need to pass parameters between routes, based on different parameters. Display different pages. In Vue Router, we can pass parameters between routes in two ways: dynamic routing and query parameters.

1. Dynamic routing

Dynamic routing refers to adding specific parameters to the route and then using these parameters to control the behavior of the page. The parameter transmission method of dynamic routing is relatively flexible, and parameter values ​​can be updated at any time when the route changes.

Code example:

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

2. Query parameters

Query parameters refer to adding ?key=value to the URL to pass specific parameters. The method of passing query parameters is relatively simple, and parameter values ​​can be obtained and updated through the $route object.

Code example:

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

Summary

This article mainly introduces the basic concepts of Vue Router, three ways of routing jumps, and two ways of parameter passing. In practical applications, we can use different methods to implement routing control and management according to different needs. I hope that the introduction in this article can help everyone better understand how to use Vue Router.

The above is the detailed content of How to implement jump in vue router. For more information, please follow other related articles on the PHP Chinese website!