nuxt路由跳转传参的几种方式

goldenlee    前端    999+次    2021-12-13 19:33:59


前言:最近在搞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
复制代码

// 方式一:mounted里面接收
mounted(){
  this.$route.params.id
  this.$route.query.id
}


// 方式二:asyncData里面接收
asyncData({params,query}){
  console.log('id',params.id)
  console.log('id',query.id)
}
复制代码

动态路由传参

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。主要注意name的值,文件路径名-动态路由名称(这个名称不带_)。

假设页面路径是这样的:

pages/
--| test/
-----| _id.vue // 动态路由的参数 id,文件名则需用 _id
-----| list.vue
复制代码

最后生成的路由配置就是这样的:

{
  name: 'test-id',
  path: '/test/:id',
  component: 'pages/test/_id.vue'
},
{
  name: 'test-list',
  path:'/test/list',
  components: '/pages/teset/list.vue'
}
复制代码

1.nuxt-link方式传参

<ul>
  <li v-for="item of arr">
    <nuxt-link
      :to="{ name: 'test-id', params: { id: item.id } }"
    >
      {{ item.title }}
    </nuxt-link>
  </li>
</ul>
复制代码

动态路由传参,当然这里只支持name,params的方式啦。

2.js的方式传参

参照上面的基础路由传参方式就行。

3.接收参数

参照上面的基础路由接收参数方式就行。

注意:参数名对应动态路由的文件名。 比如你定义动态路由的文件是 _id.vue,那么动态路由的params的参数就是id,那么params: {id: 1}。

路由嵌套

创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。 如我的目录如下:

pages/
--| test2/
-----| list/  目录名,必须与下面的list.vue文件同名
--------| index.vue  这是list.vue组件默认的视图内容
--------| _id.vue    这是子组件视图内容
-----| list.vue
复制代码

模板中用法如下,注意name的值:

<ul>
  <li v-for="item of arr">
    <nuxt-link
      :to="{ name: 'test2-list-id', params: { id: item.id } }"
    >
      {{ item.title }}
    </nuxt-link>
  </li>
</ul>
<nuxt-child></nuxt-child>
复制代码

注意:最后一定要加上<nuxt-child></nuxt-child>组件,这是子组件的视图。


结束:这就是常用到的关于nuxt路由传参的几种方式了。




最新评论

小天天天天 回复:[em_63][em_63]

2021-12-13 19:37:21 回复


最新评论

网站数据

网站文章数:376

注册用户数:23

TOP