Nuxt.JS:如何在页面中获取路由URL参数

体式:

我正在使用Nuxt.js,并且有一个动态页面,该页面在

pages/post/_slug.vue

因此,当我访问页面URL(例如http:// localhost:3000 / post / hello-world)时,如何读取页面中的此slug参数值。

目前,我正在使用asyncData获得它,如下所示:

  asyncData ({ params }) {
    // called every time before loading the component
    return {
      slug: params.slug
    }
  }

这很好用,但是我认为这不是最好的方法,应该有一种更好的方法使参数对页面可用。任何帮助表示赞赏!

弗朗西:

在.vue文件中,获取Vue路由器路由对象

    this.$route

(请注意,Vue路由器this.$router对象下方

$route对象具有一些有用的属性:

{
  fullpath: string,
  params: {
    [params_name]: string
  },
  //fullpath without query
  path: string
  //all the things after ? in url
  query: {
    [query_name]: string
  }
}

您可以使用如下$route对象:

    <script>
    export default {
      mounted() {
        console.log(this.$route.fullPath);
      }
    };
    </script>

网址路径参数位于下方route.params,如您的情况route.params.slug

    <script>
    export default {
      mounted() {
        console.log(this.$route.params.slug);
      }
    };
    </script>

Vue Moute挂钩仅在客户端上运行,当您想在服务器上获取参数时,可以使用asyncData方法:

    <script>
    export default {
        asyncData({route, params}) {
            if (process.server) {
                //use route object
                console.log(route.params.slug)
                //directly use params
                console.log(params.slug)
            }
        }
    };
    </script>

如果您不需要服务器上的parms信息,或者在渲染之前不需要任何数据(例如,在渲染之前基于路由参数发出http请求),我认为已安装的钩子就足够了。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档