This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August
In this article we will look at creating route instance methods :createRouter and their configuration items, and we need to know how to use them.
createRouter
Creating a Routing Instance
Create a routing instance that can be used by a Vue application as follows:
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = []
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router
Copy the code
The route variable is used to store routes. However, it is worth noting that this is the use of Vue Router 4.x. This is not the same as the use of earlier versions of the Vue Router.
Configuration items
There are more than two configuration parameters in the createRouter function, so let’s take a look.
history
Officials say it is used to implement routing history. Most Web applications should use createWebHistory, but it requires that the server be configured correctly *. You can also use the Hash-based history of createWebHashHistory, which doesn’t require any configuration on the server, but the search engines don’t handle it at all and perform poorly on SEO.
Configure the route to hash mode or HTML5 mode, which is the same as the lower version, but the method of use has been changed, using the following:
HTML 5 mode
history: createWebHistory()
Copy the code
This is the most common history in single-page applications, which must be served over the HTTP protocol. The createWebHistory function takes one argument and can add a path as follows:
history: createWebHistory('/folder/')
Copy the code
So our corresponding output url is: https://xxx.com/folder/.
Hash pattern
history: createWebHashHistory()
Copy the code
Similar to HTML5 mode, this function takes a parameter that does the same thing, but with a different output address: https://xxx.com/folder/#.
We can see from the result that there is an extra #, so we should avoid using paths containing # when passing parameters, such as:
createWebHashHistory('/folder/#/app/') // This parameter is not recommended
Copy the code
Note: If SEO is important to you, you should use createWebHistory.
LinkActiveClass and linkExactActiveClass
LinkActiveClass is the default class for the activated RouterLink, and linkExactActiveClass is the default class for the precisely activated RouterLink. The configuration on router-link is the same as in the createRouter function.
ParseQuery and stringifyQuery
The custom implementation parseQuery uses to parse queries must decode query keys and values.
StringifyQuery A custom implementation of stringing a query object. It should not be preceded by? , the query key and value should be properly encoded.
If we parse the query using qs packages, we can provide both parseQuery and stringifyQuery as follows:
parseQuery: qs.parse,
stringifyQuery: qs.stringify,
Copy the code
routes
It should be familiar to most people, and it is the initial list of routes to add to the route. We’ll talk more about that later.
scrollBehavior
A function that controls scrolling while navigating between pages. You can return a Promise to delay scrolling. For more details, see scrolling behavior.
function scrollBehavior(to, from, savedPosition) {
// 'to' and 'from' are both routing addresses
// 'savedPosition' can be empty if not.
}
Copy the code
We can control the scrolling behavior every time a route jumps.
conclusion
-
In actual development, we usually master history and routes.
-
If we don’t want the server to have that much configuration, we’ll use createWebHashHistory; If SEO is important to you, we should use createWebHistory, but this also requires us to configure the server.
For more articles, the portal has opened: Look back at the Vue3 catalogue!