项目代码同步至码云 weiz-vue3-template
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
1. 安装
npm i vue-router@4
2. 集成
1. 新建两页面进行示例
在src/view下新建home.vue和login.vue，内容如下：
<script setup lang="ts">
defineOptions({
name: 'V-home'
})
</script>
<template>
<div>home page</div>
</template>
<style lang="scss" scoped></style>
login.vue里修改下对应name即可
2. src下新建router文件夹
index.ts作为路由入口，static.ts作为静态路由，modules内还可以放入其他类型路由，整体目录结构如下：
src
|
+---router
| | index.ts
| +---modules
| | static.ts
static.ts内容如下：
const routes = [
{
path: '/',
component: () => import('@/views/home.vue')
},
{
path: '/login',
component: () => import('@/views/login.vue') //路由懒加载
}
]
export default routes
index.ts内容如下：
import { Router, createRouter, createWebHistory } from 'vue-router'
/** 自动导入 src/router/modules 下的静态路由
* import.meta.glob使用说明：https://cn.vitejs.dev/guide/features#glob-import
*/
const modules: Record<string, any> = import.meta.glob(['./modules/**/*.ts'], {
eager: true
})
/** 初始路由 **/
const routes: any[] = []
Object.keys(modules).forEach((key) => {
const module = modules[key].default
if (Array.isArray(module)) {
for (const item of module) {
routes.push(item)
}
} else {
routes.push(module)
}
})
/**
* 创建路由实例
* createRouter选项有：https://router.vuejs.org/zh/api/interfaces/RouterOptions.html
* hash模式使用createWebHashHistory(): https://router.vuejs.org/zh/api/#Functions-createWebHashHistory
*/
export const router: Router = createRouter({
history: createWebHistory(),
routes,
strict: true,
scrollBehavior(_to, from, savedPosition) {
return new Promise((resolve) => {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.saveSrollTop) {
const top: number = document.documentElement.scrollTop || document.body.scrollTop
resolve({ left: 0, top })
}
}
})
}
})
/**
* 路由守卫
* https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
*/
router.beforeEach((to, _from, next) => {
// isAuthenticated 代表你的鉴权
const isAuthenticated = true
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})
export default router
3. 修改App.vue
承载路由，并增加导航
<script setup lang="ts"></script>
<template>
<router-link to="/"> 去首页 </router-link> 丨 <router-link to="/login"> 去登录 </router-link>
<router-view />
</template>
<style scoped></style>
4. 修改main.ts
使用路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')
3. 预览
其他用法，包括传参、重定向、动态路由、过渡动效等，请参考官方文档。