Router学习

一、声明式
1.创建VUE工程

npm creat vite

2.更新依赖

cd 到VUE工程目录

npm install

3.安装路由

npm install vue-router

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

配置路由
// 导入创建路由的方法
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Add from '../components/Add.vue'

// 定义路由
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/list', component: List },
{ path: '/add', component: Add },
]

// 创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
5.准备页面和组件
components/Home.vue

components/List.vue

components/Add.vue

6.main.js
import { createApp } from 'vue'
import App from './App.vue'
// 在 main.js 中导入路由对象
import router from './routers/router.js'

// 创建 Vue 应用实例
const app = createApp(App)
// 挂载路由
app.use(router)
// 挂载到 DOM
app.mount('#app')
7.路由使用
App.vue

**二、编程式** 普通路由

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

通过useRouter,动态决定向那个组件切换的路由
在 Vue 3 和 Vue Router 4 中，你可以使用 useRouter 来实现动态路由(编程式路由)
这里的 useRouter 方法返回的是一个 router 对象，你可以用它来做如导航到新页面、返回上一页面等操作。
案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签
App.vue

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

全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
守卫代码的位置: 在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});
});