How does Vue get the route name and load different data?

With the continuous advancement of front-end development technology, more and more front-end frameworks and libraries are widely used in actual development. Among them, vue.js, as one of the popular front-end frameworks, has become the first choice of many web application developers. One of the frameworks. In vue, how to load different data according to the obtained route name after route jump? This article will give an implementation method.

1. vue-router

In the official documentation of vue, vue-router is introduced as a routing manager library. When the application needs to perform complex page jumps and status management, use it vue-router can provide us with a better solution. vue-router has powerful functions such as asynchronous loading, routing parameters, navigation hooks, and nested routing. Its emergence also provides convenience for Vue application construction.

2. Route Jump and Parameter Passing

In vue-router, we generally use router-link or $router.push() method for route jump. The essence of these two methods is Routing jumps are achieved by changing the URL address. Passing parameters when routing jumps is also very simple. You only need to add query or params parameters to the jump link.

For example, we now have the following routing configuration:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail', component: Detail },
  { path: '*', component: NotFound }
]

At the same time, we need to pass an id parameter when jumping to the detail route. We can implement it like this:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail', query: { id: 123 } })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail&#39;, query: { id: 123 } }">Detail</router-link>

In How to get the parameters passed by the route in the detail component? We can do this:

this.$route.query.id

It should be noted here that if it is a params parameter, the usage method is slightly different. In addition to the need to use the params parameter when jumping the link, the path must also be modified to include dynamic parameters when configuring the route. The example is as follows:

const routes = [
  { path: '/home', component: Home },
  { path: '/detail/:id', component: Detail },
  { path: '*', component: NotFound }
]

When jumping the link, we need to change the params object into The included parameter names are in one-to-one correspondence with the parameter names declared in the routing configuration. The example is as follows:

// 通过 $router.push 方法跳转
this.$router.push({ path: '/detail/123' })
// 或者通过 router-link 组件生成跳转链接
<router-link :to="{ path: &#39;/detail/123&#39; }">Detail</router-link>

When getting the parameters passed by the route in the detail component, you only need to use $route.params.id.

3. Dynamic rendering of data

In practical applications, we sometimes need to dynamically load different data based on route names. Usually, we can get the data based on the route name and render it in the component's created or mounted hook function. For example:

export default {
  name: 'Detail',
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const name = this.$route.name
      if(name === 'detailA') {
        // 加载数据A
        axios.get('/api/detailA').then(res => {
          this.detailData = res.data
        })
      } else if(name === 'detailB') {
        // 加载数据B
        axios.get('/api/detailB').then(res => {
          this.detailData = res.data
        })
      }
      // ... 可以根据需要继续添加其他路由名称的loading操作
    }
  }
}

In the above example, we determine the current route name based on $route.name, then send the corresponding request to load the data and save it in the data attribute of the component, and then perform data processing on the page. render.

4. Summary

This article mainly introduces how to obtain the current route name and load different data based on the name in the vue application. We can use the route jump and parameter passing functions provided by vue-router to map the data to be loaded and the route name, and then load the corresponding data according to the route name in the component's created or mounted hook function. This implementation method is simple and convenient, and can also improve development efficiency.

The above is the detailed content of How does Vue get the route name and load different data?. For more information, please follow other related articles on the PHP Chinese website!