本文主要是介绍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学习之路小坎坷的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！