vue3路由配置及使用基础

一、为什么要使用路由

SPA（一个Web网站只有唯一的一个html页面）项目中，不同页面之间的切换需要通过前端路由来实现。

二、路由的概念

1、概念理解

就前端路由而言，它是一组Hash地址和组件之间的对应关系，也可以理解为一组“键值对”。

2、前端路由的工作方式

当前hash地址发生改变时，路由监听到他的变化，并把改变后的hash地址对应的组件显示在页面中。

三、一个简单路由的实现

1、在已创建的vue3工程中安装vue-router。

在vscode中最上方点击三个点，选择终端→新建终端，然后在打开的终端输入：npm install vue-router@next -S  ，等待安装成功即可。

 

2、创建一个route.js文件并根据需求写入路由规则

假设现在的工程需求是编写一个用户个人界面，包括首页、个人简介、过往经历 三个部分。那么相应的路由应该如下。createRouter方法用于创建路由实例，createWebHashHistory用于制定路由的工作方式（hash）

// 引入路由方法
import {createRouter,createWebHashHistory} from 'vue-router'
// 引入要管理的三个组件
import HomePage from "../components/homePage.vue" //此处应该是你存放相应组件的文件位置
import PersonalInformation from "../components/personalInformation.vue"//此处应该是你存放相应组件的文件位置
import Experience from "../components/experience.vue"//此处应该是你存放相应组件的文件位置
// 制定路由规则
const router = createRouter({
    history:createWebHashHistory(),

    routes:[
        { path: '/', redirect: '/homePage'},
        { path: '/homePage', component: HomePage} ,
        { path: '/personalInformation', component: PersonalInformation},
        { path: '/experience', component: Experience}
    ],
})
// 将定义好的路由暴露给外部
export default router

3、为路由匹配相应组件并导入路由模块同时挂载使用

根据工程需求，我们的components文件夹中应该包含三个文件 分别是：homePage.vue,  personalInformation.vue,  和experience.vue。

 

然后在main.js文件中引入路由并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/router.js"
const app=createApp(App);
app.use(router)
app.mount('#app');

同时在根组件App.vue中写入路由链接（使用<router-link>标签）和路由占位符(使用router-view标签)。 

<script setup>


</script>

<template>
  <!-- 声明路由链接 -->
  <router-link to="/homePage">首页</router-link>
  <router-link to="/personalInformation">个人简介</router-link>
  <router-link to="/experience">过往经历</router-link>
  <<hr/>
<!-- 路由占位符 -->
  <router-view></router-view>
</template>

<style >
  #app{
    width:100%;
    height:100%;
    overflow:hidden;
  }
</style>

创建完成，页面效果