1.安装
npm install vue-router@4
2. 添加路由
新建router文件夹，新建文件 index.ts
import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes = [{path: '/login',component: () => import("../views/Login.vue")},{path: '/',component: () => import("../views/Index.vue")}
]const router = createRouter({// history: createWebHashHistory('/'),history: createWebHistory(),routes
})export default router
3. 在main.ts文件加入路由
import { createApp } from 'vue'
import App from './App.vue'//加入路由
import router from './router/index';
//并通过use，使用路由
createApp(App).use(router).mount('#app')4.在App.vue 添加导航，并使用router-view
<template><router-link to="/" >首页</router-link> <br/><RouterLink to="/login">登录页面</RouterLink><hr/><router-view></router-view></template>5. 查看效果
6.扩展
createWebHistory路由模式路径不带#号：
const router = createRouter({ history: createWebHistory(), routes});
createWebHashHistory路由模式路径带#号：
const router = createRouter({ history: createWebHashHistory(), routes});
7.路由全局前置守卫
router.beforeEach是一个全局前置守卫,用于在路由导航触发前进行一些权限校验或提示。
其定义式:
router.beforeEach((to, from, next) => {// ...
})
TypeScript
它接受三个参数:
-
to:即将要进入的目标路由对象
-
from:当前导航正要离开的路由
-
next:调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。例如,我们可以在全局前置守卫中实现登录校验:
router.beforeEach((to, from, next) => {const store = useStore1()if (to.path == "/login") { // 判断该路由是否需要登录权限next()} else {if (store.name != "") { // 判断用户是否已登录next()} else {next('/login') // 未登录则跳转到登录页} }}) 
