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') // 未登录则跳转到登录页
}
}
}) 
