Vue $ router in use as well as the $ route

Basic routing concepts

• route, it is a route.

{ path: '/home', component: Home }

• routes, is a group of routes.

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About } ]

• router can be understood as a container, or a mechanism, which manages a set route. Briefly, route but were URL mapping function and, when in a URL is received, the mapping table to find the appropriate routing function, the process is handled by the router.

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

VUE in

• $ Route for the current router jump object which can get name, path, query, params and so on.
• $ Router is VueRouter instance, you want to navigate to a different URL, use $ router.push method, return to the previous history using the $ router.go method. Like said above, here's $ router to manage the routing of the jump, er end of the English language have expressed kind of person, this is where you can imagine a manager, he controls the routing where to go (push, go) so that it is easier to remember.

Routing Jump

• 1 can complete handwriting path:

this.$router.push({path:`/user/${userId}`})

This approach requires as follows route

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

Parameters received in this way is this. $ Route.params.userId.

• 2 may also be transmitted using params:

this.$router.push({name:'Login',params:{id:'leelei'}}) //不带参数 变成 ip/login

• 3 may use the query transmitted:

this.$router.push({path:'/login',query:{id:'leelei'}) //带查询参数变成 ip/login?id=leelei //带斜杠/代表从根目录出发，不会嵌套之前的路径

query parameter passing is for the path of, params parameters are passed for the name of. . Way of receiving parameters are similar. . this. $ route.query. and this. $ route.params.

Note that this is only the url jump, jump to the url display what components have to configure routing. Jump router and <router-link> tag jump, similar rules.

Some things to note

• Use the query parameter passing, then, will get to see the parameters passed similar request, using the params parameter passing words are not in the url bar of the browser, similar to the post request.
• If a path, params is ignored (that is, if you want to use params mass participation, be sure to use the name), but the query is not the case. If you use the full path and query mass participation, it will not cause routing parameter passing parameters is lost when you refresh the page.
• Router.push and router.replace difference is: replace will not add new records to history, but to replace the current history record that the use of the page jump to replace 'Back' button can not be clicked.

Reprinted from: https: //segmentfault.com/a/1190000016662929