如何在Nuxt.js组件中访问Router对象获取当前路由信息？

我懂你现在碰到的问题啦——想在Nuxt组件里获取当前路由的信息，但直接在script顶级作用域访问this.$router就报错了对吧？这是因为在组件的<script>最外层，this还不是Vue组件的实例，自然找不到$router对象。

其实Nuxt已经帮我们把$router和$route全局注入到所有组件实例里了，完全不需要手动导入，下面给你几种靠谱的实现方式：

方法1：直接在模板中使用（最简单） #

你可以直接在模板里用$route对象获取当前路由信息，比如要显示路由名称或者路径，直接写：

<template> 
<div> 
<hr> 
<p>{{ $store.state.menuitems[0] }}</p> 
<hr> 
<div class="artfooter"> 
<span>当前路由名称：{{ $route.name }}</span>
<span>当前路由路径：{{ $route.path }}</span> 
</div> 
<br> 
</div> 
</template>

方法2：在组件生命周期钩子中访问 #

如果需要在逻辑里处理路由信息，要在组件的生命周期钩子（比如created、mounted）里访问，这时候this已经指向组件实例了：

<script> 
export default { 
  created() {
    // 这里可以正常访问$router和$route
    console.log('当前路由路径：', this.$route.path)
    console.log('Router对象：', this.$router)
  }
} 
</script>

方法3：用计算属性做响应式处理 #

如果需要把路由信息作为响应式数据使用，推荐用计算属性：

<script> 
export default { 
  computed: {
    currentRoutePath() {
      return this.$route.path
    },
    currentRouteName() {
      return this.$route.name
    }
  },
  mounted() {
    console.log(this.currentRoutePath)
  }
} 
</script>

另外你之前手动导入store的写法其实也没必要，Nuxt同样把$store注入到组件实例里了，模板里直接用$store就可以，script里在生命周期钩子或计算属性里用this.$store就行。

内容的提问来源于stack exchange，提问作者enginedave