Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use Vue-Router2 to achieve routing function". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use Vue-Router2 to achieve routing function" can help you solve your doubts.

Vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. The single-page application of vue is based on routing and components, which are used to set access paths and map paths to components. Traditional page applications use some hyperlinks to switch and jump pages. In vue-router single-page applications, it is the switching between paths, that is, the switching of components.

Note: vue-router 2 is only applicable to the Vue2.x version. Here we talk about how to use vue-router 2 to implement routing functions based on vue2.0.

Npm installation is recommended.

Npm install vue-router

First, use routing

In main.js, you need to explicitly install the routing feature:

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

1. Define components, which are used here to import import from other files

Import index from'. / components/index.vue'import hello from'. / components/hello.vue'

two。 Define rout

Const routes = [{path:'/ index', component: index}, {path:'/ hello', component: hello},]

3. Create a router instance, and then transfer the routes configuration

Const router = new VueRouter ({routes})

4. Create and mount the root instance. Route is injected through router configuration parameters, so that the whole application has routing function.

Const app = new Vue ({router, render: h = > h (App)}). $mount ('# app')

After the above configuration, the components matched by the route will be rendered to the App.vue

Then this App.vue should be written as follows:

In index.html, it should be written like this:

This will mount the rendered page to the div whose id is app.

2. Redirect redirect

Const routes = [{path:'/', redirect:'/ index'}, / / so enter / will jump to / index {path:'/ index', component: index}]

III. Nested routing

Const routes = [{path:'/ index', component: index, children: [{path: 'info', component: info}]}]

The info component can be accessed through / index/info

IV. Lazy loading

Const routes = [{path:'/ index', component: resolve = > require (['. / index.vue'], resolve)}, {path:'/ hello', component: resolve = > require ([. / hello.vue'], resolve)},]

Lazy loading does not load all the components at once, but only when you access that component. Applications with more components will improve the speed of loading for the first time.

5.

In vue-router 1, you use the

In vue-router 2, the a tag in version 1 is replaced.

HomeHomeHomeHomeHomeUserRegister

VI. Routing information object

1.$route.path

A string that always resolves to an absolute path, such as "/ foo/bar", for the path that should be routed before.

2.$route.params

A key/value object, which contains dynamic fragments and fully matched fragments, is an empty object if there are no routing parameters.

3.$route.query

A key/value object that represents the URL query parameters. For example, for the path / foo?user=1, there is $route.query.user = = 1, which is an empty object if there are no query parameters.

4.$route.hash

The hash value of the current route (without #), or an empty string if there is no hash value.

5.$route.fullPath

The parsed URL contains the query parameters and the full path of the hash.

6.$route.matched

An array containing routing records for all nested path fragments of the current route. The routing record is a copy of the object in the routes configuration array (and in the children array).

To sum up, a main.js that includes redirection, nested routing, and lazy loading is as follows:

Import Vue from 'vue'import VueRouter from' vue-router'import App from'. / App'Vue.use (VueRouter) const router = new VueRouter ({routes: [{path:'/', redirect:'/ index'}, {path:'/ index', component: resolve = > require ([. / components/index.vue'], resolve), children: [{path: 'info', component: resolve = > require ([. / components/info.vue'], resolve)}]} {path:'/ hello', component: resolve = > require (['. / components/hello.vue'], resolve)},]}) const app = new Vue ({router, render: h = > h (App)}). $mount ('# app') read here This article "how to use Vue-Router2 to achieve routing function" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it. If you want to know more about the article, please 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.