前言:最近在搞nuxt项目,因为平时做路由跳转的时候,传参都是用的query的方式,前几天因为不想影响页面地址的url,试了下params的方式,写了多次都出错,今天查看了文档,发现用params的方式传参时:name指的是nuxt生成路由配置后的name,不是指页面的路径,也不是组件内部定义的name属性。
基础路由传参
1. nuxt-link 方式传参
<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>
<nuxt-link :to="{path: '/news', query: { newsId: 3306 }}">query传参</nuxt-link>
</li>
</ul>
复制代码
2. js的方式传参
// 字符串的方式
this.$router.push('/project?id=123')
// params方式,注意:name是指nuxt生成后的name
this.$router.push({ name: 'project', params: { id: 123} })
// query方式
this.$router.push({ path:'/project', query: { id: 123 } })
复制代码
说明
- 用字符串的方式传参时:参数是页面的路径拼接上?以及后面的参数。
- 用params的方式传参时:name指的是nuxt生成路由配置后的name,不是指页面的路径。
- 比如:pages目录下有:/project/index,/project/create,nuxt默认生成的name就为 project、project-create,而不是组件内部写的name属性。
- 用query的方式传参时:path指的是页面的路径。
假设 pages
的目录结构如下:
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
复制代码
那么,Nuxt.js 自动生成的路由配置如下:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user', // params传参时,用到的 name
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one', // params传参时,用到的 name
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
复制代码
3.模板里面接收参数
$route.params.id
$route.query.id
复制代码
4. js里面接收参数
// 方式一:mounted里面接收
mounted(){
this.$route.params.id
this.$route.query.id
}
// 方式二:asyncData里面接收
asyncData({params,query}){
console.log('id',params.id)
console.log('id',query.id)
}
复制代码