A brief introduction to $router and $route in vue (with examples)

This article brings you a brief introduction to $router and $route in vue (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Basic concept of routing

route, it is a route.

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

routes is a set of routes.

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

Router can be understood as a container, or a mechanism that manages a group of routes. To put it simply, route only maps URLs and functions. After receiving a URL, it searches for the corresponding function in the routing mapping table. This process is handled by the router.

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

In VUE,

$route is the current router jump object that can obtain name, path, query, params, etc.

$router is a VueRouter instance. If you want to navigate to a different URL, use the $router.push method. To return to the previous history, use the $router.go method. As mentioned above, $router here manages routing jumps. In English, the ending of er indicates a kind of person. Here you can imagine this as a manager, who controls where the route goes (push, go) , which makes it easier to remember.

Route jump

1 You can handwrite the complete path:

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

This method requires the following configuration in the routing

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

This way of receiving parameters is this.$route.params.userId.

2 You can also use params to pass:

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

3 You can also use query to pass:

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

query parameters are for path, and params parameters are for name. . The methods of receiving parameters are similar. . this.$route.query.and this.$route.params.

Note that this is just a jump url. What components are displayed when jumping to this url must be configured. The rules for router jump and label jump are similar.

Some things to note

If you use query to pass parameters, you will see the parameters passed in the url bar of the browser similar to the get request. Use params to pass parameters. Otherwise, it will not, similar to a post request.

If path is provided, params will be ignored (that is, if you want to use params to pass parameters, you must use name), but this is not the case for query. If you use the full path and query parameters to pass, the parameters passed by the route will not be lost when the page is refreshed.

The difference between router.push and router.replace will not add new records to history, but replace the current history records. That is, the ‘back’ button of the webpage jumped to using replace cannot be clicked.

The above is the detailed content of A brief introduction to $router and $route in vue (with examples). For more information, please follow other related articles on the PHP Chinese website!