Vue and Vue-Router: How to use route parameters in child components?

Vue and Vue-Router: How to use routing parameters in child components?

Introduction:
Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement navigation functions for single-page applications. In application development, we often need to pass parameters between components, and Vue-Router provides a simple way to handle this problem. This article will introduce how to use route parameters in Vue's subcomponents and provide specific code examples.

1. Configure routing parameters
When using Vue-Router, we can configure routing parameters by defining a path with parameters in the routing configuration. For example, suppose we have a component named Article that needs to accept a parameter to display different article content. We can define a path with parameters in the routing configuration as follows:

const router = new VueRouter({
  routes: [
    { path: '/article/:id', component: Article }
  ]
})

In the above code, the :id in the path represents a parameter. When accessing /article/1, the value of the parameter id will be 1.

2. Using routing parameters in subcomponents
In Vue subcomponents, we can access routing parameters through the $route object. The specific method is as follows:

export default {
  created() {
    console.log(this.$route.params.id)
  }
}

In the above code, we use Vue's life cycle hook function created to demonstrate how to use routing parameters in sub-components. this.$route.params.id will output the value of the route parameter id.

3. Dynamically update routing parameters
Sometimes, we need to display different content based on different routing parameters in the same subcomponent. In Vue, use watch to monitor changes in routing parameters, and then update component data based on the changes. The specific method is as follows:

export default {
  watch: {
    '$route.params.id': function(newId, oldId) {
      this.fetchArticle(newId)
    }
  },
  methods: {
    fetchArticle(id) {
      // 根据id获取文章内容
    }
  }
}

In the above code, we use Vue’s watch attribute to monitor changes in the $route.params.id routing parameter. When the routing parameters change, the fetchArticle method is called to obtain the corresponding article content.

Conclusion:
In Vue-Router, we can configure routing parameters by defining a path with parameters in the routing configuration. In Vue subcomponents, routing parameters can be accessed through $this.$route.params. At the same time, you can also use the watch attribute to monitor changes in routing parameters and update the data of subcomponents based on the changes.

Through the introduction and sample code of this article, I hope readers can better understand how to use routing parameters in subcomponents in Vue, thereby developing Vue applications more flexibly. At the same time, you will also have a deeper understanding of the use of Vue and Vue-Router.

Reference link:

• Vue official website: https://vuejs.org/
• Vue-Router official website: https://router.vuejs. org/

The above is the detailed content of Vue and Vue-Router: How to use route parameters in child components?. For more information, please follow other related articles on the PHP Chinese website!