当前位置：首页 > article >正文

Nuxt项目动态路由带参接参

article 2024/12/24 11:30:48

我们创建一个Nuxt项目
然后在pages目录下创建 engineering.vue文件参考代码如下

<template>
  <div>
    <div>工程界面</div>
    <nuxt-child></nuxt-child>
  </div>
</template>

<script>
export default {
  name: 'EngineeringPage'
}
</script>

<style>
</style>

然后在pages下创建一个 engineering文件夹下面创建一个 Information.vue文件
参考代码如下

<template>
    <div>信息工程</div>
</template>

<script>
export default {
  name: 'InformationgPage'
}
</script>

<style>
</style>

然后在pages下的index.vue组件中编写代码如下

<template>
  <div>
      <ul>
          <li
            v-for = "(item,index) in appList"
            :key = "index"
            @click = "visitApp(item)"
          >{{ item }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
      appList: [
          "/engineering",
          "/engineering/Information",
          "/engineering/111"
      ]
    }
  },
  methods:{
    visitApp(url) {
        this.$router.push(url);
    }
  }
}
</script>

我们这里在data中定义了一个响应式数据是一个字符串数组叫 appList 他下面的每一个字符串对应一个路径
然后通过v-for将他渲染在列表上
然后定义了一个visitApp事件点击时将用户点击的节点放入router.push中进行跳转
在这里插入图片描述

如图可见我们点击前两个都是能正常跳转的因为他们都有对应的组件
但我们点第三个很显然他就找不到了因为engineering文件夹下并没有111.vue组件

但这个111是一个路径参数啊如果我们每一个id都要在这定义一个vue组件那可太麻烦了

这就涉涉及到了Nuxt的动态路由当然这里指的不是像vue那样动态注入的后台管理路由只是动态接受路径参数的路由组件

写法就是例如你访问 /engineering/111 首先在pages下创建一个engineering 文件夹然后在这个文件夹下创建一个下划线跟路由参数名的组件例如我这个 111 我想要这个参数叫 userid
我们就可以在engineering 下创建一个 _userId.vue
在这里插入图片描述

参考代码如下

<template>
    <div>我是一个动态接收userId的路由组件</div>
</template>

<script>
export default {
  name: 'InformationgPage'
}
</script>

<style>
</style>

在这里插入图片描述
大家不用担心路径参数影响到原有的子路由

因为他会先匹配如果没有对应的子路由才去匹配下划线规则的动态路由
但如果你下面有这种动态路由你直接访问他
它就会直接给你匹配到这个参数路由上来因为他会认为你这个参数传了个空进来
在这里插入图片描述

然后我们在这个动态路由中也可以拿到传过来的参数我们改写_userId.vue代码如下

<template>
    <div>我接收到的userId是{{this.$route.params.userId}}</div>
</template>

<script>
export default {
  name: 'InformationgPage'
}
</script>

<style>
</style>