vue3 编程式导航

最新推荐文章于 2024-08-27 20:39:32 发布

鲤忆

最新推荐文章于 2024-08-27 20:39:32 发布

阅读量215

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_62487693/article/details/129396280

版权

本文介绍了Vue3中如何进行编程式导航，通过示例代码展示了如何使用`$router.push`方法来实现动态参数传递，从而改变URL并进行路由跳转。此功能在前端开发中用于动态操作路由，例如添加数据后的页面切换。

摘要由CSDN通过智能技术生成

<template>
    <h1>shop car {
  { $route.params.id }}{
  { $route.params.title }}</h1>
    <div class="list">
        <ul>
            <li v-for="item in list.shopcar" :key="item.id" @click="e=>change(item)">
              <h2>名称：{
  { item.title }}</h2>
              <h2>价格: {
  { item.price }}</h2>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { reactive} from 'vue';
import { useRoute,useRouter } from 'vue-router'
let $route = useRoute();
let $router = useRouter();
console.log($route.params);
let list = reactive({
    shopcar:[
        {
            id:1,
            title:'苹果',
            price:123
        },  {
            id:2,
            title:'波罗蜜',
            price:123
        },  {
            id:3,