Vue.js嵌套路由修改父路径为/HelloWorld后失效的解决及路径与API关系问询

需调整的代码点 #

• 修复HelloWorld.vue的跳转路径错误
  你将父路由路径修改为/HelloWorld后，子路由的完整访问路径为/HelloWorld/:id，原代码中<router-link>跳转路径为/${item.id}，无法匹配现有路由规则，导致点击后路由匹配失败、页面无法渲染。修改方式二选一即可：
  方案1：拼接完整路径

  <router-link :to="`/HelloWorld/${item.id}`">
    {{ item.title }}
  </router-link>
  

  方案2：使用命名路由跳转（更稳妥，无需手动拼接路径）

  <router-link :to="{name: 'User', params: {id: item.id}}">
    {{ item.title }}
  </router-link>
  

• 补充根路径登录页路由配置
  你需要根路径/作为登录页，目前路由配置中没有对应规则，需在main.js的路由配置中新增：

  // 先引入你的登录页组件，假设组件名为Login
  import Login from './components/Login.vue'
  
  const router = new VueRouter({
    routes: [
      // 新增登录页路由
      {
        path: "/",
        name: "Login",
        component: Login
      },
      {
        path: "/HelloWorld",
        name: "HelloWorld",
        component: HelloWorld,
        children: [{ path: ":id", name: "User", component: User }]
      }
    ]
  });
  

• 修复tabs.vue的接口返回值处理逻辑
  你调用的https://fakestoreapi.com/products?limit=X接口返回的是数组，原代码直接取item.description会报错，需修改赋值逻辑：

  tabsandcontent(this.$route.params.id).then((item) => {
    // 取对应下标的商品数据
    this.item = item.data[Number(this.$route.params.id)-1];
  });
  

根路径/和API调用的关联 #

二者本身没有直接逻辑关联。之前父路由路径为/时，跳转/${item.id}刚好匹配路由规则，能正常拿到路由参数id传入API。修改父路由路径后跳转路径不匹配，无法拿到路由参数，导致API传参异常，才会出现路径影响API调用的错觉。

内容的提问来源于stack exchange，提问作者T dhanunjay