VUE3 路由配置

1.下载 VueRouter 模块

在命令行中输入

yarn add vue-router

2.导⼊相关函数

在自己创建的router/index.js 文件中

import { createRouter, createWebHashHistory } from 'vue-router'

3.创建路由实例

在自己创建的router/index.js 文件中

const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')};//懒加载模式

const routes=[        // 创建路由规则

   { path: '/', component:theFirstRouter}

]

const router = createRouter({        //创建路由实例

    history: createMemoryHistory(),

    routes

});

export default router        //导出路由实例，我这是默认导出

4.注册, 将路由实例注册到应⽤中, 让规则⽣效

此过程在main.js 文件中

import router from './router'        //因为我这是默认导入；

app. use (router)                //将路由交给app组件使用

5.在⽬录下, 创建需要的⻚⾯组件，并配置路由规则

先将文件组件化，然后配置路由表；

6.给路由出⼝(路径匹配的组件, 显⽰的位置)

< template >

        <!-- 路由出⼝ -->

        < router-view />

</ template >

 7.抽离

将所有东西写在一个页面上；抽离出来

router/index.js中写的

import { createRouter, createMemoryHistory } from 'vue-router'

const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')};    //懒加载

// 创建路由规则

const routes=[

   { path: '/', component:theFirstRouter}

]

//创建路由

const router = createRouter({

    history: createMemoryHistory(),

    routes

});

export default router

main.js中写 

import './assets/main.css'

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import App from './App.vue'

import router from './router'       //主要是红色这一部分；把代码引进去

const app = createApp(App)

app.use(createPinia())

app.use(router)

app.mount('#app')