【Vue-Router】嵌套路由


footer.vue

ts 复制代码
<template>
  <div>
    <router-view></router-view>
    <hr>
    <h1>我是父路由</h1>
    <div>
      <router-link to="/user">Login</router-link>
      <router-link to="/user/reg" style="margin-left: 10px;">Reg</router-link>
    </div>

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

list.json

json 复制代码
{
  "data": [
    {
      "name": "面",
      "price":300,
      "id": 1
    },
    {
      "name": "水",
      "price":400,
      "id": 2
    },
    {
      "name": "菜",
      "price":500,
      "id": 3
    }
  ]

}

login.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <table cellpadding="0" class="table" border="1">
    <thead>
      <tr>
        <th>商品</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr :key="item.id" v-for="item in data">
        <th>{{ item.name }}</th>
        <th>{{ item.price }}</th>
        <th>
          <button @click="toDetail(item)">详情</button>
        </th>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';

const router = useRouter()

type Item = {
  name: string;
  price: number;
  id: number;
}

const toDetail = (item: Item) => {
  router.push({
    // name 对应 router 的 name
    name: 'Reg',
    // 不会展示在URL上,存在于内存里
    params: {
      id: item.id
    }
  })
}
</script>

<style scoped>
.table {
  width: 400px;
}
</style>

reg.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <button @click="router.back()">返回</button>
  <div style="font-size: 20px;">
    品牌:{{ item?.name }}
  </div>
  <div style="font-size: 20px;">
    价格:{{ item?.price }}
  </div>
  <div style="font-size: 20px;">
    id: {{ item?.id }}
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';

const router = useRouter();
const route = useRoute();
// 返回对象用item接收
console.log(route);

const item = data.find(v => v.id === Number(route.params.id))


</script>

<style scoped>
.reg {
  background-color: green;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

index.ts

html 复制代码
import { createRouter, createWebHistory, RouteRecordRaw,  } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/user",
    component: () => import("../components/footer.vue"),
    children:[
      {
        path: "",
        name: 'Login',
        component: () => import("../components/login.vue")
      },
      {
        path: "reg",
        name: 'Reg',
        component: () => import("../components/reg.vue")
      }
    ]
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

App.vue

html 复制代码
<template>
  <h1>hello world</h1>
 
  <hr>
  <router-view></router-view>
</template>

<script setup lang="ts">

</script>

<style scoped></style>


相关推荐
姜 萌@cnblogs28 分钟前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip36 分钟前
实现elementplus官网主题切换特效
前端·css
Darling02zjh37 分钟前
HTML5
前端·html·html5
开开心心_Every44 分钟前
多线程语音识别工具
javascript·人工智能·ocr·excel·语音识别·symfony
成长ing121381 小时前
闪白效果
前端·cocos creator
Lazy_zheng1 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清1 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw1 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript
关羽的小刀1 小时前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈1 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js