6.11笔记

Router学习****

一、声明式

  1. 创建VUE工程

  2. npm creat vite

  3. 更新依赖

  4. cd 到VUE工程目录

  5. npm install

  6. 安装路由

  7. npm install vue-router

  8. 在src文件夹中新建routers文件夹，再在routers文件夹中新建router.js文件

  9. 配置路由

  10. // 导入创建路由的方法

  11. import { createRouter, createWebHashHistory } from 'vue-router'

  12. // 导入组件

  13. import Home from '../components/Home.vue'

  14. import List from '../components/List.vue'

  15. import Add from '../components/Add.vue'

  17. // 定义路由

  18. const routes = [

  19. { path: '/', redirect: '/home' },

  20. { path: '/home', component: Home },

  21. { path: '/list', component: List },

  22. { path: '/add', component: Add },

  23. ]

  25. // 创建路由实例

  26. const router = createRouter({

  27. history: createWebHashHistory(),

  28. routes

  29. })

  30. export default router

  31. 准备页面和组件

    • components/Home.vue

* components/List.vue

    • components/Add.vue

  11. main.js

  12. import { createApp } from 'vue'

  13. import App from './App.vue'

  14. // 在 main.js 中导入路由对象

  15. import router from './routers/router.js'

  17. // 创建 Vue 应用实例

  18. const app = createApp(App)

  19. // 挂载路由

  20. app.use(router)

  21. // 挂载到 DOM

  22. app.mount('#app')

  1. 路由使用

  2. App.vue

二、编程式

普通路由

  • list页 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由)

编程式路由

  • 通过useRouter,动态决定向那个组件切换的路由
  • 在 Vue 3 和 Vue Router 4 中，你可以使用 useRouter 来实现动态路由(编程式路由)
  • 这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。

案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签

  • App.vue

三、路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

  1. 全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
  2. 全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
  3. 守卫代码的位置: 在router.js中

//全局前置路由守卫
router.beforeEach( (to,from,next) => {
//to 是目标地包装对象 .path属性可以获取地址
//from 是来源地包装对象 .path属性可以获取地址
//next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
//next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
console.log(to.path,from.path,next)

//需要判断，注意避免无限重定向
if(to.path == '/index'){
next()
}else{
next('/index')
}

} )

//全局后置路由守卫
router.afterEach((to, from) => {
console.log(Navigate from ${from.path} to ${to.path});
});

在Router的基础上加入Pinia**

Pinia介绍

Pinia 是 Vue.js 的轻量级状态管理库，它让你能够在组件之间共享和管理状态，我们可以把 Pinia 想象成一个全局的数据仓库，所有组件都可以从这里获取数据或者更新数据。

本章节我们要介绍的是 Vue3 官方推荐的状态管理库 —— Pinia，相比 Vuex，Pinia 提供了更简洁、更符合 Vue3 组合式 API 思维的状态管理方案。

下图对比了两者的结构差异：

  • Vuex 采用单仓库加多级模块的树状结构，层级固定，依赖 mutations，整体更重。
  • Pinia 则由多个独立 store 组成，扁平、轻量、不分模块，无命名空间负担。

img

Pinia 核心特点：

  • 支持 Vue2 和 Vue3
  • 极简的 API 设计
  • 完整的 TypeScript 支持
  • 支持组合式 API
  • 模块化设计，无需嵌套模块

Pinia 的扁平结构让组件可以直接连到任意 store，各取所需，不经过树状模块，也不走命名空间路径，状态流动简单直接，耦合度低。

img

步骤1：创建工程

npm creat vite
cd ./工程目录
npm install
npm install vue-router
npm install pinia

步骤 2：创建 src/stores/user.js

Pinia有三部分：

  • state:存数据
  • gettters:算派生数据
  • actions:执行逻辑、修改state

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
state: () => ({
token: localStorage.getItem('token') || '',
username: localStorage.getItem('username') || ''
}),
actions: {
setUser(username, token) {
this.username = username
this.token = token
localStorage.setItem('username', username)
localStorage.setItem('token', token)
},
logout() {
this.username = ''
this.token = ''
localStorage.removeItem('username')
localStorage.removeItem('token')
}
}
})

步骤 3：修改 main.js，注册 Pinia

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

const app = createApp(App)

const pinia = createPinia()

app.use(pinia)
app.use(router)
app.mount('#app')

步骤 4：修改 Login.vue，使用 store

  • 导入 useUserStore，登录成功后调用 setUser。

Login.vue 修改部分

步骤 5：修改 Home.vue，使用 store

  • 导入 useUserStore，显示 userStore.username。
  • 退出调用 userStore.logout。

Axios的基本使用

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

  1. 先创建Axios工程

npm creat vite
npm install
npm install axios

Axios 封装 + 模拟登录 API

步骤 1：安装 Axios 和 json-server

cd ./工程目录(pinia)

npm install axios

以管理员身份运行powershell

安装json-server, 输入：

npm install -g json-server

查看json-server版本

json-server --version

报错：

json-server : 无法将“json-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径
，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1

json-server --watch db.json --port 3000

CategoryInfo : ObjectNotFound: (json-server:String) [], CommandNotFoundException
FullyQualifiedErrorId : CommandNotFoundException

运行：npm config get prefix 查看json-server安装位置

然后将安装位置添加到环境变量

问题还是没有解决

如果不想折腾环境变量，或者想快速测试，可以暂时用 npx 来临时运行。

npx 会直接运行 node_modules 里的命令，这样就不用纠结环境变量的问题了。

cd E:\02.海华学院\04.2025-2026第二学期\03.综合能力实训\02.Project\JavaWeb备课学习\04.weitoutiao-axios
npx json-server --watch db.json --port 3000

步骤 2：在项目根目录(工程)创建 db.json

{
"users": [
{ "id": 1, "username": "张三", "password": "123" }
]
}

步骤3：启动json-server

npx json-server --watch db.json --port 3000

步骤 4：创建 src/utils/request.js

import axios from 'axios'

const request = axios.create({
baseURL: 'http://localhost:3000',
timeout: 10000
})

// 请求拦截器：自动添加 token
request.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = Bearer ${token}
}
return config
})

// 响应拦截器：统一处理错误
request.interceptors.response.use(
response => response.data,
error => {
if (error.response?.status = 401) {
localStorage.removeItem('token')
window.location.href = '/login'
}
return Promise.reject(error)
}
)

export default request

步骤 5：创建 src/api/user.js

import request from '../utils/request'

export const login = (data) => {
// json-server 不支持直接密码校验，需要前端模拟：先查询用户，再对比密码
return request.get('/users', { params: { username: data.username } })
}

步骤 6：修改 Login.vue 调用真实 API

步骤 7：新建端口

![image-20260610234038792](04.Axios 封装 + 模拟登录 API.assets/image-20260610234038792.png)

npm run dev

posted @ 2026-06-15 10:25  nianovo  阅读(2)  评论(0)    收藏  举报