Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router

项目代码同步至码云 weiz-vue3-template
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。

1. 安装

shell 复制代码
npm i vue-router@4

2. 集成

1. 新建两页面进行示例

src/view下新建home.vuelogin.vue,内容如下:

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内容如下:

ts 复制代码
const routes = [
  {
    path: '/',
    component: () => import('@/views/home.vue')
  },
  {
    path: '/login',
    component: () => import('@/views/login.vue') //路由懒加载
  }
]

export default routes

index.ts内容如下:

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

承载路由,并增加导航

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

使用路由

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. 预览

其他用法,包括传参、重定向、动态路由、过渡动效等,请参考官方文档

相关推荐
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
endingCode7 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
前端百草阁9 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜9 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4049 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish9 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序9 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5419 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript