标签：vue const home vue3 之路 import router 路由 坎坷

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
  
  
  
  

标签：vue,const,home,vue3,之路,import,router,路由,坎坷
来源： https://www.cnblogs.com/zhangmenglei/p/15690874.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。