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和RouterView
    import {RouterLink,RouterView} from ‘vue-router’
</script>

注意事项

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

history模式与hash模式

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

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

const router = createRouter({
    history:createWebHashHistory(