/src/assets/a.json

{

"data": [

{

"id":1,

"name": "hello",

"price": 20

},

{

"id":2,

"name": "vite",

"price": 30

},

{

"id":3,

"name": "pinia",

"price": 14

}

]

}

vscode插件： JSON to TS

json文件的ts代码如何生成：

1、选中json文件的内容

2、windows: ctrl+shift+alt+s

mac: control+shift+option+s

得到的内容：

/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: Array = [

{

path: '/detail',

name: 'detail',

component: () => import('../components/Detail.vue')

}

];

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router;

1、query传参: url会带参数

/src/App.vue

/src/components/Detail.vue

2、params传参+动态路由传参: url会带参数

/src/router/index.ts改造成下面这样：

{

    // 动态路由

path: '/detail/:id',

name: 'detail',

component: () => import('../components/Detail.vue'),

}

/src/App.vue的

/src/components/Detail.vue改造成下面这样：

3、params传参: 如果没有和动态路由一起使用，详情页❌不可以通过route.params来获取参数值了

上图是Vue Router官网编程式导航的name和params的组合传参，如果没有和动态路由一起使用，详情页通过route.params来获取参数值，控制台会报警告⚠️，并且详情页得到的route.params是个空对象{}。

vue-router.js?v=5791c9af:42 [Vue Router warn]: Discarded invalid param(s) "id", "name", "price" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.

这是于2022年8月22日4.1.4版本的路由开始设置的，这样做的原因是“刷新页面获取到的参数会丢失”,详见https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22。

修改方案：见路由传参的其他方式

4、可以用History API的state传参: url不会带参数

/src/App.vue的

/src/components/Detail.vue改造成下面这样：

5、将参数作为一个新属性传递给to.meta

这是已知的瞬间状态，并且由于它在导航守卫中，因此在重新加载页面时将被保留

router.beforeEach(async to => {

if (to.meta.shouldFetch) {

// name `data` whatever you want

to.meta.data = await fetchSomething()

}

})

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：