Summary of page jump methods in Vue3

is a progressive JavaScript framework for building user interfaces that provide multiple ways to navigate between pages. In Vue 3, page jumps are mainly managed through Vue Router, and other methods such as programmatic navigation and the use of anchor links are also supported. This article will introduce in detail the various page redirects in Vue 3, and help you better master these functions through specific code examples.

Use Vue Router to achieve page jump

Vue Router is the officially recommended router manager, which can easily add the functionality of a single page app (SPA) to your Vue app. Vue Router allows you to define multiple routing rules and dynamically switch different views according to user actions without reloading the entire page.

Install Vue Router

First, make sure that Vue Router is installed in your project:

npm install vue-router@4

Then, import and configure Vue Router in the project's entry file:

//  orimport { createApp } from 'vue';
import App from './';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/';
import About from './views/';
 
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
 
const router = createRouter({
  history: createWebHistory(),
  routes
});
 
createApp(App).use(router).mount('#app');

Declarative Navigation - <router-link> Tags

<router-link> is a component provided by Vue Router to create HTML elements with routing links. When clicking on these links, Vue Router will automatically handle URL changes and update the corresponding view content.

Example: Basic usage

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

In this example, <router-link> generates a <a> tag with the href attribute, and by default, clicking will trigger a route switch.

Parameter pass

If you need to pass parameters to the target page, you can use the object form in the to attribute:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User Profile</router-link>

Here, assume that you have defined a named route named user in the routing configuration, and that route accepts a parameter named userId.

Programming Navigation

In addition to using <router-link> for declarative navigation, Vue Router also allows you to programmatic page redirects through JavaScript code. This is very useful in some scenarios, such as responding to button click events or redirecting after form submission.

Example: Basic usage

this.$('/about');

Or use named routes and parameters:

this.$({ name: 'user', params: { userId: 123 } });

Router Guard

Programmatic navigation is often used with routing guards to control when and where page jumps are performed. For example, confirm whether the user saved the changes before leaving the current page:

beforeRouteLeave(to, from, next) {
  const answer = ('Do you really want to leave? You have unsaved changes!');
  if (answer) {
    next();
  } else {
    next(false);
  }
}

Dynamic routing matching

Vue Router supports dynamic routing matching, which means you can define paths containing placeholders to display different content based on different parameters. For example:

const routes = [
  { path: '/user/:id', component: User }
];

In this case, :id is a dynamic segment, and when the user accesses /user/123, Vue Router passes 123 as a parameter to the User component.

Navigation Guard

Vue Router provides a variety of global, local and component navigation guards that can intercept and handle navigation behavior at different stages. Commonly used include:

• Global Front Guard (beforeEach)
• Global resolution guard (beforeResolve)
• Global back hook (afterEach)
• The guards exclusively for routes
• Guards within components

Example: Global Front Guard

const router = createRouter({
  // ...
});
 
((to, from, next) => {
  // Some logic can be executed here, such as checking the login status, etc.  (`Navigating from ${} to ${}`);
  next(); // Make sure to call next() otherwise the navigation will not continue});

Use anchor links to jump within the page

Sometimes we don't need to change the overall layout of the page, but instead want to scroll to a specific section within the same page. At this time, you can use ordinary HTML anchor links:

<a href="#section-1">Go to Section 1</a>
 
<!-- Other content on the page -->
 
<div >
  <h2>Section 1</h2>
  <!-- More content -->
</div>

This approach is suitable for quick navigation within the page, especially in long documents or complex single-page applications.

Use the browser API to jump page

For some special cases, it may be necessary to use the browser-provided API to perform page redirection, such as or (). However, it is generally recommended to use Vue Router to manage navigation in your SPA for consistency and a better user experience.

Example: Use

 = '/about';

This method will cause page refresh and should only be used if it is really needed.

This is the article about the summary of page redirection methods in Vue3. For more related content of page redirection of Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!