vue3 路由切换加载axios 给变量books
时间: 2023-07-20 12:20:54 浏览: 78
好的,对于你的问题,我可以通过以下的代码来实现:
首先,你需要在路由组件中引入axios:
```javascript
import axios from 'axios'
```
然后在路由切换时,使用axios获取数据并赋值给变量books:
```javascript
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: Home,
beforeEnter: (to, from, next) => {
axios.get('your_data_url').then((response) => {
// 将获取到的数据赋值给变量books
const books = response.data
// 将books传递给组件
to.params.books = books
next()
})
},
},
],
})
```
在上面的例子中,我们使用了 `beforeEnter` 路由守卫来在路由切换前获取数据,然后将数据传递给组件。
在组件中,你可以通过 `$route.params.books` 来访问变量books:
```javascript
export default {
name: 'Home',
props: {
books: {
type: Array,
default: () => [],
},
},
mounted() {
// 从$route.params.books中获取变量books
this.books = this.$route.params.books
},
}
```
这样,当你访问Home组件时,变量books就会被加载并传递给组件。
希望这个例子能够帮助你解决问题!
阅读全文