添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

vue 获取路由信息

在 Vue.js 中,您可以使用 $route 对象来获取当前路由信息。 $route 对象是 Vue.js 内置的路由对象,它包含了当前路由的一些信息,例如当前路由的路径、参数、查询参数等等。

您可以通过 this.$route 来访问 $route 对象,然后获取需要的信息。

以下是一些常用的路由信息属性:

  • $route.path :当前路由的路径
  • $route.params :当前路由的参数对象,例如在路由定义中声明了 :id 参数,那么在组件中就可以通过 $route.params.id 来获取该参数的值。
  • $route.query :当前路由的查询参数对象,例如 /search?q=vue 中的 q 参数,可以通过 $route.query.q 来获取。
  • $route.fullPath :当前路由的完整路径,包括路径和查询参数。
  • 下面是一个简单的例子,演示了如何在 Vue.js 中获取路由信息:

    <template>
        <h2>当前路由信息</h2>
        <p>路径:{{ $route.path }}</p>
        <p>参数:{{ $route.params.id }}</p>
        <p>查询参数:{{ $route.query.q }}</p>
        <p>完整路径:{{ $route.fullPath }}</p>
    </template>
    <script>
    export default {
      name: 'MyComponent',
      mounted () {
        console.log(this.$route.path) // 打印当前路由的路径
        console.log(this.$route.params.id) // 打印当前路由的 id 参数
        console.log(this.$route.query.q) // 打印当前路由的查询参数 q
        console.log(this.$route.fullPath) // 打印当前路由的完整路径
    </script>
    

    希望这些信息对您有所帮助。如果您还有其他问题,请随时提问。

  •