Vue introduces routing - helps manage page jump logic

1. Install routing

npm install --save vue-router

2. Prepare two pages with mutual jump logic

New folder views New file AboutViews.vue HomeViews.vue

3. Configure independent files

Create a new folder router Create a new file index.js

history indicates the access method

4. Global import and mount in the main.js file 

5. Last use

        router-view

 

        Or router-link tag - declarative navigation without parameter mode, and the router-link tag adds to attribute value == "to be the configuration in the index.js file under the router folder, and finally run the display

 router-link tag - declarative navigation of parameter passing mode

        ① get method "? + parameter"

       Or in the index file, add the key name after the path attribute (more recommended), as follows:

         ②get method 2 query attribute configuration parameters

 

        ③ post method

There are three points to note here

1. Refreshing with post parameters will cause data loss
2. this.$route.params receives parameters
3. Hide parameter passing in the URL address bar

 $routerIt is used for programmatic navigation (changing routing); $routeit is for users to obtain routing information.

 If you use the router-view tag to nest and wrap the router-link tag, then only the router-link tag will be displayed as follows:

And pay attention to the changes in the address bar:

default:

Click About:

Click Home:

Finally, when creating a route, the difference between using the createWebHistory() method and using the createWebHashHistory () method:

◉ createWebHashHistory

On display:

        Click on the home page: http://localhost:8080/#/

        Click on the about page: http://localhost:8080/#/about

Principle: The anchor point of the a tag, although not good-looking, is better than not needing backend cooperation

◉ createWebHistory 

On display:

        Click on the homepage: http://localhost:8080/

        Click on the about page: http://localhost:8080/about

This method is nice though. But the background needs to cooperate with redirection, otherwise there will be 404 problems

Principle: H5 pushState()

Route nesting

 When a routing link is clicked on the same page <router-link>, if the parent routing component <router-view>does not disappear, the <router-link>next level routing component of the path pointed to by this level appears<router-view>

在父级的In the routing rule object, add the children attribute to nest sub-routes (in principle, it can be nested infinitely), to ensure that the sub-routing components appear while the upper-level routing components are displayed.

Take a chestnut: realize the page jump management of new == "newsDetails

                pay special attention<router-link>的to属性的 从父级开始写，/不要掉了，下面图的to写错了，应该是：/news/NewsDetails

 The parent doesn't disappear, the child routing component appears.

The news details are sub-level routes, and the news page passes through<router-view>

重定向

 If there are multiple child routes under a parent, if you want to configure the default child route display,

 Example 2:

 

 Uses: Make the menu of the system, only replace the middle page.