vue工具之VueRouter 安装与使用

一、安装

⏰ Vue2安装Vue-router3.0的版本

npm install vue-router@3

⏰ Vue3安装Vue-router4.0的版本

  npm

npm install vue-router@4

  yarn

yarn add vue-router@4

  pnpm

pnpm add vue-router@4

二、使用

//引入路由相关函数
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory} from 'vue-router'
//引入子组件路由定制
import { xxx } from '@/router/module/index'

//1.定义一些路由规则
const routes = [
    {
        path: '/',
        redirect: '/home' //重定向，当检测到路径为 '/' 重定向到 '/home' 
    },
    {
        path: '/home',
        component: () => import('../views/HomeView.vue') // 每个路由都需要映射到一个组件。
    },
    {
        path: '/register',
        component: () => import('../views/RegisterView.vue') // 每个路由都需要映射到一个组件。
    },
    {
        path: '/login',
        component: () => import('../views/LoginView.vue') // 每个路由都需要映射到一个组件。
    },
    {
        //通配符路由: 含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。
        path: '*', 
        name: 'NotFound',
        component: () => import('../components/NotFound/NotFound.vue') // 每个路由都需要映射到一个组件。
    }
]

//2.定义路由
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})

//3.定义全局前置路由守卫
router.beforeEach((to,from,next)=>{
    /**相关逻辑**/
    next()
})

//4.定义全局后置路由后卫
router.afterEach((to,from)=>{
    /**相关逻辑**/
})

export default router

^{⚠️注意：区分createWebHistory与createWebHashHistory}

⏰ 2. 在main.ts里通过插件的方式引入router/index.ts的默认导出

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

const app = createApp(App)
//使用路由
app.use(router)
//渲染
app.mount('#app')