vue3 路由组件：vue-router 使用

目的：改变URL，但页面不进行整体刷新

原理：

URL和hash值：URL的hash，相当于页面的锚点。本质是改变了 window.location 的herf 属性

HTML5 的 history：

history.pushState({},'','home')

history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。

history.pushState入栈；

history.back()出栈；

history.go(-1)  相当于 history.back()；

history.forward 相当于history.go(1)；

history.replaceState()：不能返回；

1、安装vue-router

npm install vue-router --save

2、创建路由组件

新建src/views/路由组件.vue.    如：    

3、创建路由实例，并配置路由映射关系

        新建src/router/index.js

// 1. 导入“创建路由对象” 和 “创建hash对象”
import { createRouter, createWebHashHistory } from "vue-router";

import UserVue from '../views/UserVue.vue'
import OrderVue from '../views/UserVue.vue'

//创建路由对象（即路由器）
const router = new createRouter({
    //配置路由跳转模式，这里使用 hash 模式
    history: createWebHashHistory(),
    //配置路由映射关系表
    routes: [
        {
            path: '/user',
            component: UserVue
        },{
            path: '/order',
            component: OrderVue
        }
    ]
})

//导出（暴露）路由
export default router;

4、在main.js中，使用 已配置的路由对象

//导入路由对象
import router from './assets/router'

const app = createApp(App);
//使用router
app.use(router);
app.mount('#app');

5、使用路由

6、router-link与router-view

<router-link>：该标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签。

<router-view>：该标签会根据当前的路径，动态渲染出不同的组件。

网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和<router-view>处于同一个等级。

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变。