import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default {
setup () {
const store = useStore()
const route = useRoute()
const router = useRouter()
return {
// 在 computed 函数中访问 state
count: computed(() => store.state.count),
// 在 computed 函数中访问 getter
double: computed(() => store.getters.double)
// 使用 mutation
increment: () => store.commit('increment'),
// 使用 action
asyncIncrement: () => store.dispatch('asyncIncrement')
}
}
}
例如,我们想拿到router路由的参数,该怎么办??
//路由
import *as VueRouter from 'vue-router'
//引入组件
import ProductMerchantsRegister from '../pages/register/differentusers/ProductMerchantsRegister.vue'
const routes = [
{ path: '/productMerchantsRegister/:id', component: ProductMerchantsRegister },
]
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
export default router
用vant3搭建移动端界面代码,to是跳转的路由地址
<van-button type="success" size="normal" to="/productMerchantsRegister/2" icon="shopping-cart-o">产品商家 </van-button>
我们用vant搭建了一个界面,我们希望单击返回时,在控制台打印id
可以那么写
<template>
<div>
<van-nav-bar
safe-area-inset-top="true"
title="产品商家注册"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
</div>
</template>
<script setup lang="ts">
import {useRoute} from "vue-router";
const route = useRoute()
const onClickLeft = () => {
console.log(route.params);
};
}
</script>
控制台打印输出 2