使用路由让你的Nuxt应用更具导航性

Nuxt.js是一个基于Vue.js的前端开发框架，它提供了一些有用的功能，例如模块化的开发模式以及自动生成的静态站点。其中之一就是路由系统。

框架的路由系统让我们更容易地为应用程序创建页面和导航。通过使用路由系统，我们可以定义页面 URL，根据定义的路由信息创建导航链接，并将用户带到应用程序的不同部分。

在Nuxt.js中，路由系统基于Vue Router。$route对象是当前激活的路由的信息对象，包含了当前 URL 解析得到的信息。该对象还包含路由参数、查询参数和哈希片段等。

在应用程序中使用$router属性

使用Nuxt.js的路由系统，我们可以通过$router属性来访问全局路由对象。这意味着我们可以使路由系统可用于任何组件中。

为了使用$router对象，我们需要将其导入组件中，如下所示：

<script>
export default {
  methods: {
    goToPage() {
      this.$router.push('/about')
    }
  }
}
</script>

在上面的示例中，我们使用了this.$router.push方法，该方法可以将当前页面路由到另一个URL。在这个例子中,页面将路由到/aboutURL。

通过$route对象获取路由信息

$route对象是当前激活的路由的信息对象，包含了当前 URL 解析得到的信息。在组件中，我们可以通过$route对象来访问路由信息。

比如我们想在组件中获取当前路由的name，我们可以这样做：

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

上面的代码将在组件渲染时打印当前路由的名称。

总结

Nuxt.js的路由系统是基于Vue Router的，提供了一种简单的方式来为应用程序创建页面和导航。通过掌握$router和$route对象的使用方法，在开发Nuxt应用的过程中，我们可以方便地定义页面URL，链接导航并将用户带向应用程序的不同部分。