JinLinC个人在线文档库

基本使用

通常在src文件夹下创建一个文件夹router，在router文件夹下创建一个index.js文件（路由的配置文件）index.js的代码如下：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
    {// 首页界面
        path: '/',   //根据path进行界面的先后跳转，/表示打开浏览器就打开的界面
        name: 'home',
        component: () => import('@/pages/Home.vue'),
    },
    {
        path: '/CodeAndCesium',
        alias: ["/code", "/cesium"], // 设置访问的别名，可以通过别名进行访问
        name: 'codeandcesium',
        component: () => import('@/pages/CodeAndCesium.vue'),
    }
]

const router = createRouter({  // 创建路由器
    history: createWebHistory(),  //路由的表现方式 
    routes  // 路由规则
})

export default router

路由的表现方式有两种形式：createWebHistory和createWebHashHistory前者可以直接通过path路径进行地址的跳转；后者在使用跳转的时候需要加上锚点#，再加上path路径进行跳转，更加推荐使用前者的方式：前者对搜索引擎的友好程度更好（URL更加美观，不带有#，更接近传统的网站URL，但是后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误），在两者中都可以进行前缀的添加限制，如history: createWebHistory('shop')，那么访问根目录就变成了：http://localhost:5173/shop/
对应设置别名alias：之前是通过在地址栏后面输入/CodeAndCesium进行对应组件的访问，设置完别名后，我们就可以使用别名进行访问来代替原来的访问方式，一个路由的别名可以设置多个，用数组的形式进行包裹
注意alias和name的区别：别名是我们跳转的真实的路径，而name是不更改其本来的路径的

在main.js文件中对路由进行进行挂载：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 不用读到index.js，index文件会被自动读取

const app = createApp(App)
app.use(router)  // 声明使用路由
app.mount('#app')

在App.vue中进行路由的使用：

vue

<template>
	<router-view />
</template>

<script setup>
</script>

这样打开浏览器，就使用我们的路由，一开始渲染我们/路径下的组件，可以在地址栏进行路由的跳转
<router-view />组件是用来渲染我们的页面的，我们在这个组件的同一个模板中写的任何的内容，在所有的页面中都会显示
vue
<template>
	<span>111</span>
	<router-view />
</template>
所以，有的时候写一个页面，有一部分是固定的（如导航栏，目录等），只想要一个部分进行页面渲染的路由切换，就可以通过这个方法实现

基本使用 ​

基本使用