vue 3.0 Vue Router导航守卫的使用

前言：

vue-router是vue.js官方给出的路由解决方案，能够轻松的管理SPA项目中组件的切换

安装路由

安装：npm install vue-router@4

快速使用

1. 创建路由模块

1. 在项目中的src文件夹中创建一个router文件夹，在其中创建index.js模块
2. 采用createRouter()创建路由，并暴露出去
3. 在main.js文件中初始化路由模块app.use(router)

// 创建路由
import {
   
    createRouter } from 'vue-router'

// 创建路由
const router = createRouter({
   
   
    // ……
})

export default router // 暴露出去

// 在main.js中引用
import {
   
    createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模块
let app = createApp(App)

app.use(router) // 初始化路由插件

app.mount('#app')

2.规定路由模式

• history路由模式可采用：

  • createWebHashHistory()：Hash模式

    a. 它在内部传递的实际URL之前使用了一个哈希字符#，如https://example.com/#/user/id
    b. 由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理
    

  • createWebHistory()：html5模式，推荐使用

    a. 当使用这种历史模式时，URL会看起来很“正常”，如https://example.com/user/id
    b. 由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问https://example.com/user/id，
      就会得到一个404错误；要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面
    

// An highlighted block
import {
   
    createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
   
   
    history: createWebHistory() // 使用 history 模式路由
    // ……
})

export default router

// An highlighted block
import {
   
    createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
   
   
    history: createWebHashHistory() // 使用 hash模式路由
    // ……
})

export default router

3.使用路由规则

routes配置路由规则：
● path：路由分配的URL
● name：当路由指向此页面时显示的名字
● component：路由调用这个页面时加载的组件

import {
   
    createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'

let routes = [
    {
   
   
        path: '/home', // URL 地址
        name: 'home',  // 名称
        component: HomeView  // 渲染该组件
    },
    {
   
   
        path: '/blog',
        name: 'blog',
        component: () => import('@/views/BlogView.vue')//路由懒加载
    }
]

// 创建路由
const router = createRouter({
   
   
    history: createWebHistory() // 使用 history 模式路由
    routes // 路由规则
})

export default router // 将路由对象暴露出去

4.声明路由链接和占位符

在组件模板中声明路由连接和占位符
	● <router-link>：路由链接，to属性则为点击此元素，需要切换的路由地址
	● <router-view>：路由占位符，路由切换的视图展示的位置

<template>
	<!--   路由链接，点击是路由地址会切换到属性 to 的地方   -->
    <router