Vue – the router

To view the original image

Vue-router: displays different effects according to different URL addresses


: the component helps the user navigate, which is what our traditional A tag often does; The tag of A uses href to specify the target address of navigation, while the

component uses to to specify the target address.


: is the exit of the route, where the components matched by the route will be rendered, that is, the destination address pointed to by

.

A path can match multiple routes. The matching priorities are in the order of route definition: The one defined first has the highest priority.

Create a simple VUe-Router

Create routing


and

do not need to appear in pairs, but can be rendered to a

based on the different routes configured.


<div id='router'> <router-link to='/home'>Go to Home</router-link> <router-link to='/new'>Go to New</router-link> <router-view></router-view> </div> //JavaScript code //1 Const Home={template: '<span> I'm Home </span>'}; Const News={template: '<span> </span>'}; //2. Configure a route const RoutersName =[{path:'/home', Component: home}, {path:'/new', Component :News}, {path:'*',redirect:'/home'}]; Const router=new VueRouter({routes: RoutersName // These routers and routerName are not the same, so we cannot use the short form of the object in ES6}) new Vue({ el:'#router', router })Copy the code

Note: You should be aware of the concise syntax used in ES6 objects when creating routing instances; That is, in ES6, when only the attribute name is written without the attribute value, the attribute value represents the variable represented by the attribute name

Const router = new VueRouter({routes // (abbreviation) = routes: routes)Copy the code

Of course, we can also do the configuration without using shorthand, as in the previous example

//2. Configure a route const RoutersName =[{path:'/home', Component: home}, {path:'/new', Component :News}, // Redirect {path:'/new', Component :News},]; Const router=new VueRouter({routes: RoutersName // These routers and routerName are not the same, so we cannot use the same method as those in es6.Copy the code

Therefore, the value of the attribute after the router should always be the same as the variable used when configuring the route

View the source code

Nested vue – the router

In real life, we often encounter a combination of multi-layer nested components, and each dynamic path in THE URL corresponds to each layer of nested components according to a certain structure

What can we do now?

In fact, nesting by very simple, just need to add a children, children inside the same writing as the outside

Embedded routines by

$route.params: indicates the current parameter, whatever comes after the colon

/detail/:id/age/:age –>$route.params specifies the id and age object

View the source code

Two instance methods of routing

  • Router.push ({path:’/home’}): Add a router to the history
  • Router.replace ({path:’news’}): replaces the route. No record is added to the history



The router. Push () and the router. The replace ()

With the introduction of transition animations and a chance to brush up on the Transform component, the page looks much better

View the source code

Configure the routing mode

Set the forward mode of a route

Mode Indicates the configuration mode of the route

  1. Hash mode (default) : The hash of a URL is used to simulate a full URL so that the page does not reload when the URL changes.
  2. History mode: Skip to the URL through history without reloading the page.
Const router = new VueRouter({mode: 'history',// jump without reloading page routes})Copy the code

The scrollBehavior of the route

I don’t know if you’ve ever been in a situation like that?

When switching to a new route, I want the page to roll to the top!!

When switching to a new route, keep the original scrolling position ！！！！

When switching to a new route, I want to be free to locate ！！！！

What to do at this point??

Vue-router does it, and it does it well. It lets you customize how the page scrolls when switching routes.

const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
     return {x:0,y:0} //对于所有路由导航，简单地让页面滚动到顶部
  }
})
Copy the code

Route Monitor Watch

In Vue watch is used to listen for functions that can be called when a data attribute value is sent to change; Asynchronous operation; In general, we recommend using computed or Menthods instead. Watch is recommended for large applications;

For the specific differences among MothDs, computed and watch, it is recommended to see what Da Mo teacher wrote about when to use methods, computed attributes or observers in Vue

Back to vue-Router, when we switch routes, we want some attributes to change with the route. For example, at this time, we can use Watch to monitor the route. When the route changes, the style relative to the route is also displayed or hidden. This is just a very simple example

<router-link>attribute

To: the tag equivalent to a uses the href attribute to specify the target address of the navigation. Several ways to write the destination address of a navigation

1. String representation

<router-link to='Home'>Home</router-link>
Copy the code

2. V-bind Bind attributes

<router-link :to='Home'>Home</router-link>
Copy the code

3. Object representation

<router-link :to="{path:'Home'}">Home</router-link>
Copy the code

4. Named routes

<router-link :to="{name:'Home',params:{home:123}}">Home</router-link>
Copy the code

5. The following result is /Home? plan=private

<router-link :to="{path: 'Home', query: { plan: 'private' }}">Home</router-link> 
Copy the code

Note: We use the first two methods

replace

<router-link to='Home' replace>Home</router-link> 
Copy the code

Setting the replace attribute calls router.replace() instead of router.push(), so no history is left after navigation. See the difference between router.replace and router.push() above for details

Setting the tag renders

as some kind of tag

<router-link to="/foo" tag="li">foo</router-link> <! <li class='router-link-exact-active router-link-active'> foo </li>Copy the code

<router-view>attribute

Name Specifies a name for

to ensure accurate positioning in each view when there is a view

<router-link to="/">/</router-link>
<router-link to="/other">other</router-link>

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
Copy the code

For example

Having said so much, I have almost learned the basic grammar of VUE, and my VUE grammar learning is almost over here. The next step is to practice more and summarize and continue learning in practice. Routing is both a difficult point and a key point. In the Node.js I contact, I will also encounter the jump of routing. If you figure out the route here, there’s not much else to worry about, because the language is connected.

At the end of the article to recommend some VUE learning materials, are carefully selected

  1. Official documentation series VUE, VUE-Router, vuex, vuE-Loader
  2. The desert teacher wrote vUE series of articles, very fine very complete, deep and shallow. I got a lot out of it
  3. Video learning recommendation, starting from VUE 1.0, you can generally review the development of VUE, it is recommended to watch when watching
  4. Vue 2.0 basic series, VUE 2.0 advanced series
  5. Finally, my own summary of Vue and GitHub hahahaha

As a beginner of Vue, please correct any mistakes in this article, and if you have any good learning resources or suggestions, please share them with me in the comments below