Automatic Routes

Most websites will have more than one page (i.e. a home page, about page, contact page etc.). In order to show these pages, we need a Router. That’s where vue-router comes in. When working with the Vue application, you have to set up a configuration file (i.e. router.js) and add all your routes manually to it. Nuxt.js automatically generates the vue-router configuration for you, based on your provided Vue files inside the pages directory. That means you never have to write a router config again! Nuxt.js also gives you automatic code-splitting for all your routes.

大多数站点超过1个页面(案例一个home页,about页面,contact页面等等)。为了显示这些页面,我们需要Router.这就是vue-router的用武之地。当配合vue应用工作时,你必须设置一个配置文件(案例 router.js)并且手动添加你的所有路由。Nuxt.js为你自动生成vue-router配置,基于你的pages文件夹里面提供的vue文件。这意味着你再也不用编写router配置!Nuxt.js也给你提供了所有路由的代码拆分。

In other words, all you have to do to have routing in your application is to create .vue files in the pages folder.
换句话讲,所有你应用程序中需要进行路由,是在pages目录中创建.vue文件

Learn more about Routing

Navigation

To navigate between pages of your app, you should use the NuxtLink component. This component is included with Nuxt.js and therefore you don’t have to import it as you do with other components. It is similar to the HTML tag, except that instead of using a href=”/about” we use to=”/about”. If you have used vue-router before, you can think of the as a replacement for
应用程序中的页面之间的跳转,你应该使用NuxtLink组件。这个组件包含在Nuxt.js,因此你不需要像其他组件那样导入它。和HTML的
标签很像,除了代替 href=”/about”,我们使用to=”/about”。如果你之前使用过vue-router,你可以将视为

A simple link to the index.vue page in your pages folder:
简单的链接指向pages文件夹中的index.vue页面:

  1. <template>
  2. <NuxtLink to="/">Home page</NuxtLink>
  3. </template>

For all links to pages within your site, use . If you have links to other websites you should use the tag. See below for an example:
所有链接到你站点中的页面,使用。如果你有链接到其他网站你应该使用
标签。见参阅下面事例:

  1. <template>
  2. <main>
  3. <h1>Home page</h1>
  4. <NuxtLink to="/about">
  5. About (internal link that belongs to the Nuxt App)
  6. </NuxtLink>
  7. <a href="https://nuxtjs.org">External Link to another page</a>
  8. </main>
  9. </template>

Learn more about the NuxtLink component.