Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to install and use VueRouter4.x". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to install and use VueRouter4.x" can help you solve your doubts.

URL.hash and History

There are two types of history (record history routes) in Vue Router, which are History provided in URL.hash and HTML5.

Hash history is useful for Web applications without hosts (such as file://), or when the configuration server cannot handle any URL, but hash's SEO is very poor

History history is a new addition to HTML5, which is not very friendly to IE, but Vue3 has given up IE, so you don't have to worry about IE; this is the most common way at present, but applications must be served through the http protocol.

Installation and use process

First, let's install Vue Router with the following command:

Npm i vue-router

Then write the following code in main.js:

Import {createApp} from 'vue'import App from'. / App.vue'// 1 introduces createRouterimport {createRouter, createWebHistory} from 'vue-router'// 2 to define route mapping table const routes = [/ * more router * /] / 3 to create a route instance and pass the corresponding configuration const router = createRouter (createWebHistory history: createWebHistory () here in {/ / history mode, / / pass route mapping table routes}) createApp (App) .use (router) .mount (' # app')

If there are too many routes in the above code, you can define a router.js file and extract it. The sample code is as follows:

Router.js

Export default [/ * more router * /]

Main.js

Import {createApp} from 'vue'import App from'. / App.vue'// 2 introduces route mapping table import routes from'. / router'// 1 introduces createRouterimport {createRouter, createWebHistory} from 'vue-router'// 3 to create a route instance and passes the corresponding configuration const router = createRouter (createWebHistory history: createWebHistory (), / / pass route mapping table routes}) createApp (App) .use (router) .mount (' # app')

Or * * directly export a routing instance in * router.js and use it in main.js** (this method is more common).

Router-link and router-viewrouter-link

Is a custom component provided by Vue for creating links. It is not native in Vue because the page will not be reloaded after changing the URL. For details on which attributes are supported by the component, please refer to the documentation.

Router-view

Components are used for components that correspond to URL, such as the following code:

Then the code for our router.js is as follows:

Import RootComponent from'. / components/root.vue'export default [{path:'/', / / introduction component component: RootComponent}, {path:'/ hello', / / routing lazy load introduction component component: () = > import ('. / components/HelloWorld.vue')}] routing lazy load

When our application becomes larger and larger, the packaged JavaScript code will also be very large. At this time, we need to split the whole application into different blocks, and Vue Router supports this feature. We only need to replace static import with dynamic import, such as the above code:

Component: () = > import ('. / components/HelloWorld.vue')

Then the package (webpack, Vite) tool packages these dynamically imported components separately, as shown in the following figure:

Dynamic routing

VueRouter allows us to dynamically set route matching rules. For example, we now have a User component whose content will be displayed differently according to different ID. The setting method only needs to be set in the form of parameter name.

For example:

{path:'/ user/:id', component: () = > import ('@ / components/User')}

Jump in the template as follows:

Or through the push method provided by useRouter, the hook, for example:

Import {useRouter} from 'vue-router'const {push} = useRouter () push ({path:' / user', params: {id: 10010}}) / / or let id = 10010push ('/ user/' + id)

The routing address can be obtained through the hook of useRoute, which is the same as useRouter.

Match all routes

The dynamic routing of VueRouter allows us to match which routes do not match. The sample code is as follows:

{path:'/: pathMatch (. *)', component: () = > import ('. / components/Page404.vue'),}

When the previous route match is not successful, the route is matched.

Routing nesting

Now we have a requirement to store two components under the HelloWorld component, and we need to switch between the two components.

At this time, route nesting works. In fact, route nesting is relatively simple, which is achieved through a children attribute in the routing configuration. The example code is as follows:

HelloWorld.vue

Hello World about user

Router.js

{path:'/ hello', / / routing lazy loading lead-in component component: () = > import ('. / components/HelloWorld.vue'), children: [{path: 'about', component: () = > import ('. / components/about.vue'),}, {path: 'user', component: () = > import ('. / components/user.vue'),},],}

The sub-component is relatively simple, with only one label, and the final effect is as follows:

After reading this, the article "how to install and use VueRouter4.x" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.