vue3中vue-router的使用（1）

一、了解路由

                前端路由做到URL和内容的映射，主要是监听URL的改变

    1.URL的hash

                URL的hash也就是锚点（#），本质上是改变window.location中的href属性；

                可以直接通过赋值location.hash来改变href，但是页面不发生刷新

     2.HTML5的history

                history接口是HTML5新增的，它有六种模式改变URL而不刷新页面

                replaceState:替换原来的路径；

                pushState：使用新的路径

                popState:路径的回退

                go：向前或向后改变路径

                forward:向前改变路径

                back：向后改变路径

二、使用路由

        1.安装

                yarn add vue-router

                或

                npm install vue-router

        2.使用

创建router文件夹，在文件夹下面创建index.vue文件

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

import Home from '../views/home.vue' //组件
import About from '../views/about.vue' //组件
// 创建一个路由：映射关系
const router = createRouter({
    // 指定采用模式
    history: createWebHashHistory(),
    routes: [{
            path: '/home',
            component: Home
        },
        {
            path: '/about',
            component: About
        },
    ]
})

export default router

         在main.js中引入router模块

import {
    createApp
} from 'vue'
import App from './App.vue'
// 引入路由模块
import router from './router'
const app = createApp(App)
// 挂载
app.use(router)
app.mount('#app')

        在app.vue页面加入路由插槽（路由出口，添加这个路由才会显示到页面上面）

               

<template>
  <div>
    <h3>App Content</h3>

    //路由组件显示位置
    <router-view></router-view>
  </div>
</template>

<script setup></script>

<style></style>