Vue-Router概述

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

Vue-Router

router意为路由。

Vue是单页面应用，没有那么多html文件，所以要使用路由做页面的跳转

Vue-Router允许用户通过不同的URL访问不同的内容，通过Vue可以实现多视图的单页面Web应用

安装

使用Vue3则安装Vue-Router4；使用Vue2则安装Vue-Router3

1	npm install vue-router@4 -s

在main.ts中注册Vue-Router：

import { createApp } from 'vue'
import App from './App.vue'

// Vue-Router也是一个插件，所以需要注册
import router from './router'

createApp(App).use(router).mount('#app')

使用

创建Vue-Router配置文件/src/router/index.ts：

import { createRouter, createWebHistory } from "vue-router"
import type { RouteRecordRaw } from "vue-router"

const routes:Array<RouteRecordRaw> = [
  {
    // 路径
    path: "/",
    // 对应的组件，可以把组件当一个页面使用
    // import函数形式，打包的时候实现代码分割
    component: ()=> import("../components/login.vue")
  },
  {
    path: "/reg",
    component: ()=> import("../components/reg.vue")
  }
]

const router = createRouter({
  // 路由的模式
  history: createWebHistory(),
  // 路由信息
  routes
})

export default router

准备两个路由组件：

<template>
  <div class="login">
    login
  </div>
</template>

<style scoped>
.login {
  background-color: red;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

<template>
  <div class="reg">
    register
  </div>
</template>

<style scoped>
.reg {
  background-color: blue;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

在App.vue中控制路由：

<template>
  <div>
    <h1>Vue-Router test</h1>
    <!-- router跳转的按钮，会被解析成a标签 -->
    <div>
      <router-link to="/">login</router-link>
      <router-link to="/reg" style="margin-left: 10px;">reg</router-link>
        
      <!-- 直接用a标签时，会触发默认行为，页面会闪一下 -->
      <!-- <a href="/">Login</a> -->
      <!-- <a href="/reg" style="margin-left: 10px;">Reg</a> -->
    </div>
    <hr>
    <!-- 需要容器存放router的内容 -->
    <router-view></router-view>
  </div>
</template>

Vue-Router模式

Vue2中的模式配置项为mode，Vue3为history

模式	Vue2	Vue3
hash	mode hash	createWebHashHistory
history	mode history	createWebHistory
abstract	mode abstract	createMemoryHistory

平时一般使用history或hash模式，服务端SSR渲染时默认自动开启abstract模式

history

history提供了pushState和replaceState两个方法，这两个方法改变URL的path部分不会引起页面刷新

history提供类似hashchange事件的popstate事件，但popstate事件有些不同：

通过浏览器前进后退改变URL时会触发popstate事件
通过pushState/replaceState或<a>标签改变URL不会触发popstate事件
- 但是可以通过拦截pushState/replaceState的调用和绑定<a>标签的点击事件检测URL变化
通过js调用history的back, go, forward方法时会触发popstate事件

所以history模式监听URL变化可以实现，只是没有hash模式的hashchange那么方便