路由

Nuxt中已经内置vue-router组件，可直接使用，不需要写任何代码
Nuxt中不需要自己配置路由，Nuxt会根据pages目录中的文件结构自动生成路由配置
通过 <NuxtLink to="/about">跳转到关于页面</NuxtLink>实现路由跳转，pages目录下的文件名即路由名
跳转到关于页面`会失败，存疑待修改

（1）路由切换页面

在pages目录下新建如下两个vue文件

index.vue
about.vue

实现:

pages/index.vue

<template>
  <div class="home">
    <h1>首页</h1>
    <NuxtLink to="/about">跳转到关于页面</NuxtLink>
  </div>
</template>

<script>
export default {
  },
};
</script>
复制代码

pages/about.vue

<template>
  <div class="about">
    <h1>关于页面</h1>
    <NuxtLink to="/about">跳转到关于页面</NuxtLink>
  </div>
</template>

<script>
export default {
};
</script>
复制代码

（2）路由切换激活类名：

当前路由选中后组件会自带激活类名

nuxt-link-active 模糊匹配
nuxt-link-exact-active 精确匹配

实现:

layouts/default.vue

<template>
  <div>
      <ul>
        <li>
          <NuxtLink to="/">Home</NuxtLink>
        </li>
        <li>
          <NuxtLink to="/about">About Page</NuxtLink>
        </li>
      </ul>
    <main>
      <Nuxt />
    </main>
  </div>
</template>

<style>
a {
  text-decoration: none;
}
//激活样式
a.nuxt-link-active {
  font-weight: bold;
}
a.nuxt-link-exact-active {
  color: #00c58e;
}    
</style>

复制代码

pages/index.vue

<template>
  <div>
    <h3>Home page</h3>
    <Goods/>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  layout:'blog'
}
</script>
复制代码

pages/about.vue

<template>
    <div>
    hhhhhhhhhhhh
    </div>
</template>

<script>
export default {
  layout:'blog'
}
</script>

<style>
</style>
复制代码

注：Home与 About Page两个页面文件的布局文件需一致才可实现

（3）路径和文件的关系

不需要自己写配置文件，直接和文件名直接对应.

文件	对应路径
pages/index.vue	/
pages/login.vue	/login
pages/user/order.vue	/user/order
pages/goods/index.vue	/good(省略index.vue)

注意:在Nuxt中一个文件对应一个路径，如果文件名时pages/index.vue, 那么路径可以省略

（4）路由参数

很多时候我们需要在路由上传参数，路由上的参数有两种

路径参数
查询参数

实现：

1、路径参数 参考路由 - NuxtJS | Nuxt.js 中文网

用params的方式传参时：

name指的是nuxt生成路由配置后的name，不是指页面的路径，也不是组件内部定义的name属性（即页面文件名称）,newsId为传递的参数名称

传递参数：

<nuxt-link :to="{name: 'news', params: { newsId: 3306 }}">params传参</nuxt-link>
复制代码

接收参数：

<p>
    {{ $route.params.id }}
</p>
复制代码

用query的方式传参时: