vue-router的路由嵌套

信易封

于 2021-07-17 11:06:09 发布

阅读量124

点赞数 1

分类专栏： vue 路由文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45869530/article/details/118853814

版权

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

路由

2 篇文章

订阅专栏

本文介绍了一个基于Vue的前端商品页面实现方案，通过定义不同的路由来展示各类商品详情页。文章详细展示了商品页面的组件结构及路由配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

商品页面——> 不同的商品页面

1.商品页面组件

<template>
    <div>
    <div>我是商品列表页面{{$route.params.id}}</div>
    <router-link to="/product">我要去商品1页面</router-link><br>
    <router-link to="/product/prod2">我要去商品2页面</router-link><br>
    <router-link to="/product/prod3">我要去商品3页面</router-link><br>
    <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'product',
    }
</script>

<style scoped>

</style>

2.index.js

//我的商品路由
    {
      path: '/product',
      name: 'product',
      component: Product,
      children:[//配置子路由
        {
          path: '/',
          name: 'prod1',
          component: Prod1,
        },
        {
          path: 'prod2',
          name: 'prod2',
          component: Prod2,
        },
        {
          path: 'prod3',
          name: 'prod3',
          component: Prod3,
        },
      ]
    },