Vue Router 4 如何配合 Vue 3

Vue Router 4 为路由器，用于页面切换。

由于使用 Vite 搭建 vue3 应用时没有对路由器进行配置，因此需要安装初始化 vue-router

安装

• 使用命令行查看 vue-router 所有版本号

npm info vue-router versions

• 安装 vue-router

//  我使用的版本

yarn add vue-router@4.0.0-beta.3

初始化 vue-router

1. 新建 history 对象
2. 新建 router 对象
3. 引入 TypeScript
4. app.use(router)
5. 添加 <router-view> 告诉应用在哪里展示组件
6. 添加 <router-link>

举个栗子：导航切换

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {createWebHashHistory,createRouter} from 'vue-router'
import Home from './views/Home.vue'
import Doc from './views/Doc.vue'
//	新建 history 对象 
const history = createWebHashHistory()
//	新建 router 对象
const router = createRouter({
    history:history,
    routes:[
        {path:'/',component:Home},
        {path:'/doc',component:Doc}
        ]
})

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

App.vue

<template>
	<div> 导航栏 |
  <router-link to="/">Home</router-link> |
  <router-link to="/doc">Doc</router-link>
  </div>
  <hr/>
	<router-view/>
</template>
export default {
  name: 'App'
}

报错 ：找不到模块 xxx.vue？

由于 TypeScript 只能理解 .ts 文件，无法理解 .vue 文件

解决办法:

• 创建 xxx.d.ts，告诉 TS 如何理解 .vue 文件

declare module '*.vue' {
    import { ComponentOptions  } from 'vue'
    const ComponentOptions : ComponentOptions 
    export default ComponentOptions 
  }

模块化

将 router 从 main.ts 单独提出创建 router.ts 来负责路由部分

import {createWebHashHistory,createRouter} from 'vue-router'
import Home from './views/Home.vue'
import Doc from './views/Doc.vue'
import SwitchDemo from './components/SwitchDemo.vue'
const history = createWebHashHistory()

export const router = createRouter({
    history:history,
    routes:[
        {path:'/',component:Home},
        {
            path:'/doc',
            component:Doc,
            children:[
                {path:"switch",component:SwitchDemo}
                ]}
    ]
})

main.ts

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

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

afterEach

• 当路由切换做一件事

router.afterEach(()=>{console.log('路由切换了')})