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
    
    
    
    
上一篇:后台管理系统——附完整代码


下一篇:Git默认编辑器设置