vue3的路由

目录

首选明确一下，vue路由本质还是对组件的引用，只是通过不同的url进行渲染

1 vue3 用 npm create vue@latest 来创建 选择了 route单页面 会自动创建一个路由的配置文件夹 route 下面有一个 index 这个就是vue路由的配置 可以先这样配置

2 有了结构，就可以进行 以下步骤了

 1  要先创建组件 ，没有组件切换路由是切换不了内容的

 2 在 routes中进行配置 如创建一个 我的的一个路由

  3在 route/index.js(或者.ts)中导入  并在其 routes 中进行配置

  4 进行路由的显示 

---

首选明确一下，vue路由本质还是对组件的引用，只是通过不同的url进行渲染

1 vue3 用 npm create vue@latest 来创建 选择了 route单页面 会自动创建一个路由的配置文件夹 route 下面有一个 index 这个就是vue路由的配置 可以先这样配置

import { createRouter, createWebHistory } from 'vue-router'
//路由配置 

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
  ]
})

export default router

2 有了结构，就可以进行 以下步骤了

 1  要先创建组件 ，没有组件切换路由是切换不了内容的

 2 在 routes中进行配置 如创建一个 我的的一个路由

  3在 route/index.js(或者.ts)中导入  并在其 routes 中进行配置

  4 进行路由的显示 

      一级路由要在 App.vue中进行显示 

        在 App.vue中要加入 如下代码

   

  <router-view></router-view>

 如果是二级路由，就在其父路由加入上面代码

 最后对这个路由进行测试 

 需要再加入路由，就可以直接在routes这个数组中加入对象