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

This article introduces you what is Vue-Router routing, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Vue Router is the official route manager for Vue.js. It is deeply integrated with the core of Vue.js and can be easily used in the development of SPA applications.

one。 Quick knowledge concept: 1. Back-end routing:

1. Different contents are returned according to different user URL requests, which is essentially the corresponding relationship between the URL request address and the server resources.

two。 However, there are performance problems with back-end rendering.

two。 Front-end routing:

3. Therefore, the emergence of Ajax pre-editor rendering, front-end rendering can improve performance, but does not support the browser forward and backward operation.

4. At this time, there is a SPA (Single Page Application) single-page application, the whole site has only one page, and the content changes are realized by Ajax local updates, while supporting the forward and backward operation of the browser address bar.

One of the principles of 5.SPA implementation is hash based on URL address (changes in hash will cause changes in browser record access history, but changes in hash will not trigger new URL requests). In the process of implementing SPA, the core technical point is front-end routing.

6. Front-end routing is to display different page content according to different user events. The essence is the corresponding relationship between user events and event handling functions.

3.Vue Router:

This is the official use of documentation links. Https://router.vuejs.org/zh/guide/#javascript

Vue Router is the official route manager for Vue.js. It is deeply integrated with the core of Vue.js and can be easily used in the development of SPA applications.

Its functions are as follows:

1. HTML5 history mode or hash mode is supported.

two。 Nested routing is supported.

3. Routing parameters are supported.

4. Programmatic routing is supported.

5. Named routing is supported.

two。 Basic use: premise:

The following will demonstrate the basic steps of using Vue Router with a single HTML page. It's the same principle in the vue project. Current basic code for a single page:

Document

Const app = new Vue ({el: "# app", data: {}})

You can see nothing:

Here are the specific steps to start using:

1. Introduce relevant documents:

A single page must first import vue files and vue-router files so that we can use routing.

two。 Add routing links:

The following is a label provided by vue, which is rendered as a tag by default. There is a to attribute, which is rendered as a href attribute, and the default value is rendered to the hash address that begins with #. To put it simply, when the user clicks, it jumps to different content at the same time, and this tag is what the user wants to click, which is equivalent to the a tag.

...

Add a page1 and a page2 link to our single page:

Page1 Page2

3. Add route padding bits:

The following label is called the routing padding bit, which means that the components that are matched by our routing rules in the future will be rendered to the router-view location. To put it simply, if the user clicks on the routing link, then you have to jump to the content. What we know is that not the whole page will jump, but the relevant part of the page will change. This part is the area where the router-view is displayed.

Add to our page:

Page1 Page2

4. Define routing components:

Since you want to display different content, you must be using a component to save a copy of the content. Let's define the two components of page1,page2 for a single page.

Const Page1 = {template:'I am Northern Lights Night 1'} const Page2 = {template:'I am Northern Lights Night 2'} const app = new Vue ({el: "# app", data: {}) 5. Configure a routing rule well to create a routing instance:

Routes is an array of routing rules. Each routing rule is a configuration object, which contains at least two attributes: path and component. Path represents the hash address that the current routing rule matches, and component represents the component to be displayed. To put it simply, it is the component of which content you click on the address corresponding to that link. Path should be the same as the address in the router-link tag. Don't make a mistake.

Const router = new VueRouter ({routes: [{path:'/page1',component:Page1}, {path:'/page2',component:Page2}]}) 6. Mount the route to the root instance of Vue:

In order for the routing rule to take effect, the routing object must be mounted to the vue instance object.

Const app = new Vue ({el: "# app", data: {}, router}) 7. Effect and single page code:

As for the above, we will finish the big work.

The complete code above:

Document Page1 Page2

Const Page1 = {template:'I am Northern Lights Night 1'} const Page2 = {template:'I am Northern Lights Night 2'} const router = new VueRouter ({routes: [{path:'/page1',component:Page1}, {path:'/page2') Component:Page2}]}) const app = new Vue ({el: "# app", data: {}, router}) three. Route redirection:

Route redirection means that when a user accesses address A, it forces the user to jump to address B to display a specific component page.

You can easily set the redirection of a route by specifying a new routing address through the redirect attribute of the routing rule.

{path:'/..',redirect:'/...'}

Where path represents the original address of the redirection and redirect represents the new address.

For example, in the case of the second largest point, the page you just opened is as follows, in the root directory, but we want to display page1 as soon as we enter it, so redirect the root directory.

Modify the routing rules as follows:

Const router = new VueRouter ({routes: [{path:'/page1',component:Page1}, {path:'/page2',component:Page2}, {path:'/',redirect:'/page1'}]})

Depending on the effect, I entered page1 by default without clicking:

four。 Nested routing:

The functions are as follows:

Click the parent routing link to display the template content.

There are child routing links in the template content.

Click the child routing link to display the child template content.

For example, in the case where we improve the second largest point, when we click page2 to display page2 content, there are two sub-routing connections in page2, star and moon, and the corresponding star or moon content can be displayed when one of the links is clicked.

1. First add two child routing links to the page2 component: const Page2 = {template: `

This is Star Moon No.2 of Northern Lights.

`}

At this point, the page also links the display child routes:

two。 Add route padding bits to two child routing links: const Page2 = {const Page2 = {template: `

This is Star Moon No.2 of Northern Lights.

`} 3. Set the contents of the two sub-components star and moon: const Star = {template:'I am star'} const Moon under Northern Lights Night 2 const Moon = {template:'I am Moon'} 4 under Northern Lights Night 2. Configure routing rules:

In addition to the path and component attributes, page2 adds a children attribute, which is represented as an array, and the rules for storing its child routes in the array are the same, nesting dolls.

Const router = new VueRouter ({routes: [{path:'/page1',component:Page1}, {path:'/page2', component:Page2, children: [{path:'/page2 / star',component:Star}) {path:'/ page2/moon',component:Moon}]}) 5. Effect and single page code:

Complete code:

Document Page1 Page2

Const Page1 = {template:'I am Northern Lights Night 1'} const Page2 = {template: `

This is Star Moon No.2 of Northern Lights.

`} const Star = {template:'I am star'} const Moon = {template:'I am Moon'} const router = new VueRouter ({routes: [{path:'/page1',component:Page1}) under Northern Lights Night 2. {path:'/page2', component:Page2, children: [{path:'/page2 / star',component:Star}, {path:'/page2 / moon' Component:Moon}]}) const app = new Vue ({el: "# app", data: {}, router}) five. Dynamic route matching: 1. Dynamic matching routes basically use:

If one part of some routing rules is the same, only the other part is dynamic, then we can form these dynamic parts into routing parameters, which are called dynamic route matching. To put it simply, take a look at the following routing links, they all have / page/, but the latter is different:

Page1 Page2 Page3

How do you configure routing? How about this:

Const router = new VueRouter ({routes: [{path:'/page/1',component:Page}, {path:'/page/2',component:Page}, {path:'/page/3',component:Page}]})

So in case there are a lot of write is too troublesome, so the introduction of parameters, in the dynamically changed part of the definition as parameters, parameters before a colon, which can be simplified as follows, the dynamic part is set to parameters: id.

Const router = new VueRouter ({routes: [{path:'/page/:id',component:Page},]})

The parameters of the current route can be obtained in the component through the following syntax:

$router.params. Parameter name

OK, modify the case of the second largest point again to complete the dynamic route matching:

1. Define routing links:

Page1 Page2 Page3

two。 Dynamically configure routing. Parameter id:

Const router = new VueRouter ({routes: [{path:'/page/:id',component:Page1},]}) 3. Set the content of the component and display the parameters of the current route: const Page1 = {template:'I am Northern Lights Night 1, and the current id is: {{$route.params.id}}'}

Depending on the effect:

two。 Routing components pass parameters:

The $route above is highly coupled to the corresponding route, which is not flexible enough, so you can use props to decouple the component from the route. To put it simply, there seems to be nothing to say, just look at the following example to understand.

2.1 when props is Boolean:

Const router = new VueRouter ({routes: [/ / set props, if props is true,router.params, it will be set to component property {path:'/page/:id',component:Page1,props: true},]}) const Page1 = {/ / then receive parameters through props Quickly and succinctly receive the parameter id and use it props: ['id'], template:' I am Northern Lights Night 1, and the current id is: {{id}}'}

Can achieve the same effect, and more flexible, remember the reverse, define components before configuring routing rules, only for intuitive purposes to write:

2.2 when props is an object type:

Const Page1 = {/ / then receive parameters via props, quickly and succinctly receive parameter objects and display props: ['name','age'], template: `I am Northern Lights Night 1, and the current id is: {{id}} name: {{name}} Age: {{age}} `} const router = new VueRouter ({routes: [/ / props is a parameter object, it will be set as a component property as is, / / all the custom parameters in it can be passed But id can't send {path:'/page/:id',component:Page1, props: {name:'auroras',age: 18})

Effect, which can be obtained from the object props object, but not id:

2.3 when props is a function type:

You can get anything from this.

Const Page1 = {/ / then receive parameters via props. Quickly and succinctly receive parameters props: ['name','age','id'], template: `I am Northern Lights Night 1, and the current id is: {{id}} name: {{name}} Age: {{age}} `} const router = new VueRouter ({routes: [/ / props is a function, and this object accepts the router object as its own parameter) / / both custom parameters and id can be passed {path:'/page/:id', component:Page1, props: router = > ({id: router.params.id,name:'auroras',age: 18})}})

Effect:

The current complete code:

Document Page1 Page2 Page3

Const Page1 = {/ / then receive parameters via props, quickly and succinctly receive parameter objects props: ['name','age','id'], template: `I am Northern Lights Night 1, and the current id is: {{id}} name: {{name}} Age: {{age}} `} const router = new VueRouter ({routes: [/ / props is a function, and this object accepts the router object as its own parameter) / / both custom parameters and id can be passed {path:'/page/:id', component:Page1, props: router = > ({id: router.params.id,name:'auroras') Age: 18})}}) const app = new Vue ({el: "# app", data: {}, router}) VI. Vue-Router named route:

To more conveniently represent the path of a route, you can give the routing rule an alias, that is, "named route". Continue to improve the usage of the above example:

1. First, add a name attribute to the routing rule, which is the alias:

Const router = new VueRouter ({routes: [{name:' user', path:'/page/:id', component:Page1, props: router = > ({id: router.params.id,name:'auroras',age: 18})}]})

two。 Use in routing links:

Page1 Page2 Page3

We improve the first routing link. To is preceded by a colon, where name indicates which routing rule to match, and params indicates the parameters to be passed. The same effect is shown below:

seven。 Programmatic navigation:

Declarative navigation: first of all, declarative navigation refers to the way the user completes the navigation by clicking on the link, such as clicking on the a tag or routing the link.

Programmatic navigation: programmatic navigation means to jump because I clicked on it, it is not a link, but it calls some API in JavaScript and also implements the jump.

The common programmatic navigation API is as follows:

This.$router.push ('hash address to be redirected') this.$router.go (n)

The hash address to jump is directly placed in the push. The go method implements forward and backward. N represents an array. If n is 1, it represents a forward bit in the history record, and-1 represents a backward bit in the history record.

1. This.$router.push (''):

To rewrite a case, there are three routing links: page1, page2, and page3, while in page3 there is a button that clicks to return the contents of the page1. This button is not a link in declarative navigation, it is a button.

1. Define normal routing links:

Page1 Page2 Page3

two。 Define three component contents, in which you put a button in the page3 component, bind the click event, and navigate to the page1 through API in the event:

Const Page1 = {template: `I am Northern Lights Night 1} const Page2 = {template:` I am Northern Lights Night 2 `} const Page3 = {template:`

I'm Northern Lights Night and return to page1 on the 3rd.

`, methods: {goPage1 () {this.$router.push ('/ page/1')}},}

3. Routing rules:

Const router = new VueRouter ({routes: [{path:'/page/1',component: Page1}, {path:'/page/2',component: Page2}, {path:'/page/3',component: Page3}]})

4. Depending on the effect:

5. Complete code:

Document Page1 Page2 Page3

Const Page1 = {template: `I am Northern Lights Night 1} const Page2 = {template:` I am Northern Lights Night 2 `} const Page3 = {template:`

I'm Northern Lights Night and return to page1 on the 3rd.

`, methods: {goPage1 () {this.$router.push ('/ page/1')}} } const router = new VueRouter ({routes: [{path:'/page/1',component: Page1}, {path:'/page/2',component: Page2}, {path:'/page/3' Component: Page3}]}) const app = new Vue ({el: "# app", data: {}, router})

Not only the href path, you can also do the following:

/ / string form (path name) router.push ('/ page1') / / object form router.push ({path:'/ page1'}) / / can also pass parameters. Named route router.push ({name:'/ page1',parmas: {id: 1}) / / with query parameters, becomes / page1?p=id / / which is quite practical, such as on some music web pages. Click on the playlist to navigate to another detailed page of the playlist with id. The detailed interface relies on this id to re-send the request for details router.push ({parh:'/ page1',query: {p: 'id'}}) 2. This.$router.go (n):

In the case of improving the first small point, when I page3 jumps to page1, there is another return button in page1. If we set n to-1, he will step back one place in the history record, and the other bit will be page3.

Modify the contents of the page1 component:

Const Page1 = {template: `

This is aurora borealis night returning on the 1st

`, methods: {goBack () {this.$router.go (- 1)}

Effect:

About what is Vue-Router routing to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.