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

This article mainly introduces how to achieve routing jump in vue, the article introduces in great detail, has a certain reference value, interested friends must read it!

Jump mode: 1, use "" sentence; 2, use "this.$router.push ()" statement; 3, use "this.$router.replace ()" statement; 4, use "this.$router.go (n)" statement.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

There are four ways to jump vue routes (with parameters)

1. Router-link

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" / / do not configure path, the first request can be made, refresh page id will disappear / / configure path, refresh page id will retain / / html fetch parameters $route.params.id// script fetch parameters this.$route.params.id / / query pass parameters (similar to get Parameters will be displayed after url) / / routing can not be configured / / html fetch parameter $route.query.id// script fetch parameter this.$route.query.id

2. 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 parameter this.$router.push ({name:'home',query: {id:'1'}}) this.$router.push ({path:'/home') Query: {id:'1'}}) / / html fetch parameter $route.query.id// script fetch this.$route.query.id 3. Params pass 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, you can request it for the first time Refresh page id will disappear / / configure path, refresh page id will retain / / html fetch parameter $route.params.id// script fetch parameter this.$route.params.id 4. Query and params difference query similar to get, after the jump page url will be spliced parameters, similar to? id=1, non-important can be passed like this, password or params refresh page id is also similar to post in params After the jump, there are no splicing parameters after the page url, but the refresh page id will disappear.

3. This.$router.replace () (same as above, push)

4. This.$router.go (n)

This.$router.go (n) Jump forward or backward n pages, n can be a positive or negative integer

Ps: differences between

This.$router.push

Jump to the specified url path and add a record to the history stack. Click back to return to the previous page

This.$router.replace

Jump 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, where n can be a positive or negative integer

The above is all the contents of the article "how to achieve Route Jump in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.