Vue-Router: How to use history mode to implement refresh-free routing?

Vue-Router: How to use history mode to implement refresh-free routing?

Introduction:
As a popular JavaScript framework, Vue.js has been widely used in front-end development. In Vue.js, Vue-Router is a very important tool, which can implement routing management of single-page applications (SPA). In Vue-Router, there are two modes to choose from, one is hash mode and the other is history mode. This article will discuss in detail how to use Vue-Router's history mode to implement refresh-free routing and give specific code examples.

1. Understanding the history mode
   When using the history mode in Vue-Router, there is no # character in the URL, but the browser's History API is used for navigation switching. In this mode, the route looks more beautiful and closer to the traditional URL path.
2. Start using history mode
   Using history mode is very simple. You only need to set the mode attribute to 'history' when creating a Vue Router instance. For example:

//引入Vue和Vue-Router
import Vue from 'vue'
import Router from 'vue-router'

//在Vue中使用Vue-Router插件
Vue.use(Router)

//定义路由
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

//创建Vue实例，并将router实例添加到Vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. Configuring the server
   When using history mode, the server needs to be configured to respond to URL requests. Because in history mode, when refreshing the page or directly accessing the URL, a request will be sent to the server, so the server needs to be configured to return the same homepage (such as index.html).

In common server software, such as Apache and Nginx, this can be achieved through configuration files. The following is an Apache server configuration example:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

4. Page jump without refreshing
   After using the history mode, Vue-Router will automatically listen to the browser's navigation events. When the user clicks on the page When linking, the rendering component is switched without refreshing the entire page, thus achieving refresh-free routing.

Suppose we have two pages: Home and About. In the Home page, we can add a button that links to the About page:

<template>
  <div>
    <h1 id="Welcome-to-Home-Page">Welcome to Home Page!</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

In the About page, we can also add a button that links to the Home page:

<template>
  <div>
    <h1 id="Welcome-to-About-Page">Welcome to About Page!</h1>
    <router-link to="/">Home</router-link>
  </div>
</template>

When the user clicks When these links are made, the page will switch to the corresponding component without refreshing.

5. Summary
   Vue-Router’s history mode uses the browser’s History API to implement refresh-free route switching. Using history mode can make the URL look more beautiful and closer to the traditional URL path. When using history mode, you need to configure the server so that it returns the same home page to respond to URL requests. By using the router-link component provided by Vue-Router, we can easily implement refresh-free routing.

Through the above steps, you can easily use Vue-Router's history mode to implement refresh-free routing. Hope this article helps you!

The above is the detailed content of Vue-Router: How to use history mode to implement refresh-free routing?. For more information, please follow other related articles on the PHP Chinese website!