本文主要是介绍vue3学习之路小坎坷,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. router路由方面
-
配置路由
// 如果需要使用 hash 模式,则把 createWebHistory -> createWebHashHistory
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes:[
{
path: "/",
name: "Index",
redirect: "/home",
component: () => import("../views/home/Home.vue"),
},
{
path: "/home",
name: "Home",
component: () => import("../views/home/Home.vue"),
},
{
path: "/my",
name: "My",
component: () => import("../views/my/My.vue"),
},
]
});
export default router;
-
使用路由
// APP.vue使用 (根据项目需求需要自行搭配<transition/> <keep-alive/> <component/>等内置组件使用)
<router-view>
<transition name="router-fade" mode="out-in">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</transition>
</router-view>
// 组件中使用
import { useRouter, useRoute } from 'vue-router'
// 返回上一路由 或者 路由跳转
const router = useRouter()
router.go(-1)
router.push(...)
// 获取传递的参数id
const route = useRoute()
route.query.id
这篇关于vue3学习之路小坎坷的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!