vite4 typescript vue3 pinia 从零搭建(5) -凯发k8官方网

项目代码同步至码云 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，内容如下：

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 = 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

承载路由，并增加导航

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

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

总结

以上是凯发k8官方网为你收集整理的vite4 typescript vue3 pinia 从零搭建(5) - 路由router的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。