The difference between $router and $route
In vue2.0, the page parameter is this.$route.query or this.$route.params to receive the parameters passed by router-link.
When routing jumps, in addition to using the router-link tag, you need to jump in the script tag in the event, so one way is to write this.$router.push('The path name that needs to be jumped') in the script tag.
At the time of writing, I found why these two are different. When I typed this in the console, I found that $route and $router exist at the same time.
$route is the current router jump object that can get name/path/query/params, etc.
$router is an instance of VueRouter. If you want to navigate to a different URL, use the $router.push method
Returning to the previous history also uses the $router.go method
Parameters of the route object $route
In applications that use vue-router, the routing object will be injected into each component, assigned the value this.$route, and when the route is switched, the routing object will be updated.
so, the routing object exposes the following attributes:
1. The $route.path
string, which is equal to the path of the current routing object, will be parsed as an absolute path, such as "/home/news".
2.The $route.params
object contains the key-value pairs of the dynamic segment and the full-match segment in the route.
3. The $route.params
object contains key-value pairs of query parameters in the route. For example, corresponding to /home/news/detail/01?favorite=yes, you will get $rorute.query.favorite == "yes"
4.
The router to which the $route.router routing rule belongs (and the components to which it belongs)
5.The $route.matched
array contains configuration parameter objects corresponding to all fragments contained in the currently matched path.
6.$route.name
The name of the current route, if no named route is used, the name is empty.
Add the following code on the page to display the attributes of these routing objects:
1 <div>
2 <p>当前路径：{
{
$route.path}}</p>
3 <p>当前参数：{
{
$route.params | json}}</p>
4 <p>路由名称：{
{
$route.name}}</p>
5 <p>路由查询参数：{
{
$route.query | json}}</p>
6 <p>路由匹配项：{
{
$route.matched | json}}</p>
7 </div>