Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the ways of route jump in vue". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways of route jump in vue".

The first way: router-link (declarative routing) 1. It is fine without the parameter / / name,path. It is recommended to use name / / Note: if the link in router-link starts with'/', it starts with the root route, and if it starts without'/', it starts with the current route. two。 Pass parameters with parameter / / params (similar to post) / / routing configuration path: "/ home/:id" or path: "/ home:id" / / No path is configured. The refresh page id disappears / / configures path when requested for the first time. Refresh page id will retain / / html fetch parameters $route.params.id// script fetch this.$route.params.id second way: router.push (programmatic routing) / / string router.push ('home') / / object router.push ({path:' home'}) / / named routing router.push ({name: 'user', params: {userId:' 123'}}) / / with query parameters Become / register?plan=privaterouter.push ({path: 'register', query: {plan:' private'}})

Note: if path,params is provided, it will be ignored, and the query in the above example is not the case. Instead, in the following example, you need to provide either a routed name or a handwritten full path with parameters:

Const userId = '123'router.push ({name:' user', params: {userId}) / /-> / user/123router.push ({path: `/ user/$ {userId}`}) / /-> / user/123// where the params is not valid router.push ({path:'/ user', params: {userId}}) / /-> / user the third way: this.$router.push () (called in the function) 1. No parameter this.$router.push ('/ home') this.$router.push ({name:'home'}) this.$router.push ({path:'/home'}) 2. Query passes the parameter this.$router.push ({name:'home',query: {id:'1'}}) this.$router.push ({path:'/home',query: {id:'1'}}) / / html takes the parameter $route.query.id// script, takes the parameter this.$route.query.id3. Params parameter this.$router.push ({name:'home',params: {id:'1'}}) / / can only be configured with name// route path: "/ home/:id" or path: "/ home:id", / / do not configure path, the first request, refresh page id will disappear / / configure path, refresh page id will retain / / html to fetch parameter $route.params.id// script to fetch this.$route.params.id4. Query and params distinguish query from get. After the jump, parameters are stitched after the page url, similar to id=1, non-important can be passed this way, passwords can be used to refresh the page id is also similar to post in params, after the jump, the page url will not splice the parameters, but the refresh page id will disappear * * Note: to get the parameters above the route, use $route There is no ringing * the fourth way: this.$router.replace () (usage above, push) the fifth way: this.$router.go (n) this.$router.go (n) jump forward or backward n pages, n can be a positive integer or negative integer ps: distinguish this.$router.push to jump to the specified url path, and want to add a record to the history stack, click back to return to the previous page this.$router.replace jumps to the specified url path But there is no record in the history stack. Clicking back will jump to the previous page (that is, directly replace the current page) this.$router.go (n) jump forward or backward to n pages. N can be a positive integer or a negative integer.

Params is part of the route and must be present. Query is a parameter concatenated after url, and it doesn't matter if you don't have it.

Once params is set in the route, params is a part of the route. If the route has a parameter passed by params, but this parameter is not passed during the jump, it will cause the jump to fail or the page will have no content.

Parameters can be passed if params and query are not set, but when params is not set, refresh page or return parameters will be lost.

Both can pass parameters. What's the difference?

Query parameters are configured with path, while params parameters are configured with name. It is invalid to configure path in params.

Query does not need to set parameters in routing configuration, but params must set

The parameters passed by query are displayed in the address bar

Refresh of passing parameters by params will be invalid, but query will save the passed value and refresh will not change.

Thank you for your reading, the above is the content of "what are the ways of route jump in vue". After the study of this article, I believe you have a deeper understanding of the way of route jump in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.