vue3的路由详解

前言

在vue3对路由的写法与Vue2有着较大的差异，在此没有按照创建Vue3项目中对路由的默认配置，而是选择手动进行配置

创建router文件

首先在src文件夹建立router文件夹，其下再创建index.ts文件

index.ts

import {createRouter,createWebHistory} from ‘vue-router’//createRouter 为vue-router提供的构建路由的函数
//createWebHistory 构建history模式的路由，而createWebHashHistory是构建hash模式路由//页面
import Home from ‘@/pages/Home.vue’
import News from ‘@/pages/News.vue’
import About from ‘@/pages/About.vue’const router = createRouter({
history:createWebHistory(),  //指定路由为history模式
routes:[{path:’/home’,component:Home},{path:’/about’,component:About}]
})
export default router  //暴露构建的router

注入router

在main.js文件中

import router from './router/index' //引入router文件
app.use(router)  //使用app.mount(‘#app’)

页面的具体使用

<template><div class="app"><h2 class="title">Vue路由测试</h2><!-- 导航区 --><div class="navigate">//各种路由点击<RouterLink to="/home" active-class="active">首页</RouterLink><RouterLink to="/news" active-class="active">新闻</RouterLink><RouterLink to="/about" active-class="active">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView>  //路由页面展示区</div></div>
</template><script lang="ts" setup name="App">//引入RouterLink和RouterViewimport {RouterLink,RouterView} from ‘vue-router’
</script>

注意事项

通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载

history模式与hash模式

在创建router时，我们来有聊到路由是有两个模式的

 const router = createRouter({history:createWebHistory(), //history模式})const router = createRouter({history:createWebHashHistory(), //hash模式
})