How to modify routing hash mode in uniapp

With the continuous development of mobile Internet and Web technology, more and more enterprises and developers are beginning to adopt cross-platform development frameworks to quickly develop multi-terminal applications. As one of the most popular cross-platform development frameworks, UniApp has been widely used and recognized. In the actual development process, the default routing mode used by UniApp is hash mode, but sometimes we need to modify the routing mode, such as when there are certain needs for SEO optimization. This article will introduce how to modify the routing hash mode in UniApp.

1. Introduction to UniApp routing mode

Before introducing the UniApp routing mode, let’s first understand what routing is. Routing is essentially a mechanism for switching between management pages and components. In UniApp, the default routing mode is hash mode. The so-called hash pattern is to splice a string starting with # at the end of the URL, such as http://www.example.com/#/signin. We can switch to different pages by modifying this string.

The basic usage of routing in UniApp is as follows:

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
export default {  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

This is a simple routing configuration example. You can see that we need to use the router-view tag in the template to display the routing component.

2. Modify the routing hash mode

In actual development, we sometimes need to modify the routing mode. For example, we need to change the routing mode from hash mode to history mode to facilitate SEO optimization. Next we will introduce how to modify the routing mode.

1. Modify the unpackage/dist/dev/mp-weixin/router/index.js file

This file is the packaged WeChat applet routing configuration file, we need First enter the file to make changes. Add the following code at the top of the file:

import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

In this way, we change the routing mode to history mode.

2. Modify the unpackage/dist/dev/web/router/index.js file

This file is the routing configuration file packaged on the Web side. We also need to enter it first. The file is modified. Add the following code at the top of the file:

import VueRouter from 'vue-router'  
Vue.use(VueRouter)  

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

Similarly, we also change the routing mode to history mode.

3. Modify the App.vue file

In the last step we need to modify the App.vue file. In this file, we can mount the route to Vue through the following code, and then use router.beforeEach to monitor route changes to implement page rendering and switching.

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
import router from './router/index'  

export default {  
  router,  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

At this point, we have completed the modification of the routing mode. Repackage the application and deploy it to the server to verify whether the routing mode is modified successfully.

3. Summary

The above is the method introduced in this article for UniApp to modify the routing hash mode. Routing is an essential part of every application. Choosing the appropriate routing mode can improve the user experience and SEO optimization effect of the application. I hope this article can provide you with some help in UniApp routing development.

The above is the detailed content of How to modify routing hash mode in uniapp. For more information, please follow other related articles on the PHP Chinese website!