Shulou(Shulou.com)05/31 Report--

This article is a detailed introduction to "vue jump the same component parameters are different, the page receiving value is only received once how to solve", the content is detailed, the steps are clear, the details are properly handled, I hope this article "vue jump the same component parameters are different, the page receiving value is only received once how to solve" The article can help you solve doubts, the following follow the small series of ideas slowly in-depth, together to learn new knowledge bar.

For example:

app.vue

{{index.name}}

Data in app…vue:

goods:[ {name:'women', link:' goods'}, {name:'men', link:' goods'}, ]

Accept data in goods.vue

mounted(){ this.stri=this.$ route.query.type; }

When I loop out these links, the address of each link is the same. The parameters are different, and when we click our button

We only see the parameters in the navigation bar changing, whereas the numbers in our pages don't. Why is that?

I believe many friends already know, this is because jump to the same component, this component in the first time, will perform the steps in the component life cycle, but the second time jump to the component, the component will be reused, so will not perform some of the life cycle procedures, the same mount will not be executed, that is, will not perform the second assignment.

So how do we get values?

Here's a way:

goods.vue

beforeRouteUpdate(to,from,next){ this.stri=to.query.type; next(); }

beforeRouteUpdate is called when the current route changes but the component is reused

That's all we need. The routing addresses change and components are multiplexed.

The same can be said for another way to monitor route changes:

watch:{ '$route'(to,from){ this.stri=to.query.type } },

This method has the same effect as beforeRouteUpdate above.

Read here, this article "vue jump the same component parameters are different, page reception value only received once how to solve" article has been introduced, want to master the knowledge points of this article also need to be used by ourselves to understand, if you want to know more about the relevant content of the article, welcome to pay attention to 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.