1. 使用 nuxt-link 传参
nuxt-link 用于页面间的跳转，并且支持传递参数。可以通过两种方式传参：
a. 使用 params 传参
params 是通过动态路由来传递的参数，通常用于 URL 的路径中。
<ul>
<li>
<nuxt-link to="/">首页</nuxt-link>
</li>
<li>
<nuxt-link :to="{ name: 'about' }">关于</nuxt-link>
</li>
<li>
<nuxt-link :to="{ name: 'news', params: { newsId: 3306 } }">params传参</nuxt-link>
</li>
<li>
<nuxt-link :to="{ path: '/news', query: { newsId: 3306 } }">query传参</nuxt-link>
</li>
</ul>
b. params vs query
params: 用于动态路由的参数，通常与路由的name配合使用。params是嵌入在 URL 路径中的，如/news/:newsId。query: 用于查询参数，通常附加在 URL 的?后面，如/news?newsId=3306。
2. 使用 JavaScript 路由跳转传参
在 JavaScript 中，你可以通过 $router.push 来跳转页面并传递参数。可以选择使用 path、params 或 query 来传参。
a. 字符串方式传参
this.$router.push('/project?id=123') // 传递查询参数
b. params 方式传参
this.$router.push({ name: 'project', params: { id: 123 } })
- 这里的
name指的是 Nuxt 自动生成的路由名称，不是文件路径的名称。
c. query 方式传参
this.$router.push({ path: '/project', query: { id: 123 } })
3. 路由配置和自动生成的路由名称
假设 pages 目录结构如下：
pages/
└── user/
├── index.vue
└── one.vue
└── index.vue
Nuxt 自动生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
name: 是根据pages目录自动生成的，不是你手动指定的。params传参时，需要使用路由的name而不是路径。
4. 接收参数
接收到的参数可以通过 $route.params 和 $route.query 来访问。
a. 在模板中接收参数
<p>Path参数：{{$route.params.id}}</p>
<p>Query参数：{{$route.query.id}}</p>
b. 在组件生命周期中接收参数
-
在
mounted中接收mounted() { console.log(this.$route.params.id) console.log(this.$route.query.id) } -
在
asyncData中接收
asyncData是 Nuxt 提供的一个特殊钩子，用来在页面渲染前获取数据。asyncData({ params, query }) { console.log('id', params.id) console.log('id', query.id) }
5. 动态路由传参
动态路由的参数通常是通过文件名加上 :（如 _id.vue）来定义的。
a. 动态路由配置
假设你的目录结构是这样的：
pages/
└── test/
└── _id.vue
└── list.vue
Nuxt 会自动生成以下路由：
{
name: 'test-id',
path: '/test/:id',
component: 'pages/test/_id.vue'
}
b. 使用 nuxt-link 传递动态路由参数
<ul>
<li v-for="item of arr" :key="item.id">
<nuxt-link :to="{ name: 'test-id', params: { id: item.id } }">
{{ item.title }}
</nuxt-link>
</li>
</ul>
这里通过 params 传递了 id 参数，确保动态路由使用的是正确的路由名称。
6. 路由嵌套
如果你的页面有嵌套的子路由，Nuxt 提供了嵌套视图的功能。你需要创建一个目录和相应的 Vue 文件来定义子视图。
a. 嵌套路由的目录结构
pages/
└── test2/
└── list/
└── index.vue // 默认视图
└── _id.vue // 子组件视图
└── list.vue // 父视图
b. 使用 nuxt-link 传递参数并显示子组件
<ul>
<li v-for="item of arr" :key="item.id">
<nuxt-link :to="{ name: 'test2-list-id', params: { id: item.id } }">
{{ item.title }}
</nuxt-link>
</li>
</ul>
<nuxt-child /> <!-- 用于显示嵌套的子组件视图 -->
- 通过
nuxt-child组件来渲染子路由对应的视图。
总结
nuxt-link用于在模板中跳转并传递路由参数，可以通过params或query传递参数。$router.push提供了在 JavaScript 代码中跳转并传递参数的方式，可以使用字符串、params或query。- 动态路由 通过文件名的方式（例如
_id.vue）来实现，路由参数会被传递到相应的组件中。 - 嵌套路由 通过在目录结构中定义子组件，使用
<nuxt-child />来显示嵌套的视图。