Vue-Router使用-蒲公英云

Vue-Router使用

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