Vue 路由器接收参数 null - JavaScript

在 Vue.js 应用程序中，路由器是必不可少的组件。通过路由器，我们可以在不刷新页面的情况下实现切换不同的视图。在某些情况下，我们可能需要把参数传递给路由器来处理。本文将介绍如何在 Vue 路由器中接收参数 null。

路由器参数

在 Vue 路由中，我们可以通过在定义路由时添加参数来传递数据。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

在上面的代码中，我们定义了一个路由，包含一个名为 id 的参数。我们可以在组件中接收这个参数：

export default {
  props: ['id'],
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.userInfo = this.$http.get('/user/' + this.id)
  }
}

在组件中，我们可以使用 props 选项来接收路由参数。在上面的代码中，我们通过 $http 发送请求来获取用户信息。这里使用了 ES6 中的字符串插值，将参数 id 与 URL 拼接在一起。

接收参数 null

Vue 路由器默认情况下会将所有字符串参数解析为字符串类型。如果我们想传递一个参数值为 null 的参数，我们需要做一些特殊的处理。

首先，我们需要在路由定义中明确指定参数类型：

const router = new VueRouter({
  routes: [
    {
      path: '/test/:value',
      component: Test,
      props: (route) => {
        return { value: route.params.value || null }
      }
    }
  ]
})

在上面的代码中，我们定义了一个路由，包含一个名为 value 的参数。在 props 选项中，我们使用了一个函数来处理路由参数。如果参数值为 undefined，我们将其转换为 null。

接下来，在组件中添加一个钩子函数，以便在每次路由变化时检查参数：

export default {
  props: ['value'],
  created () {
    console.log(this.value) // null
  },
  watch: {
    '$route' (to, from) {
      if (to.params.value === undefined) {
        this.value = null
      }
    }
  }
}

在上面的代码中，我们监听了 $route 变化事件，并检查了参数值。如果参数值为 undefined，我们将其转换为 null。

现在，我们已经成功地在 Vue 路由器中接收了参数 null。