Router学习

一、声明式
创建VUE工程
npm creat vite
更新依赖
cd 到VUE工程目录
npm install
安装路由
npm install vue-router
在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

准备页面和组件
components/Home.vue

<script setup>
</script>

<template>
    <div>
        <h1>Home页面</h1>
    </div>
</template>

<style scoped>
</style>

components/List.vue

<script setup>
</script>

<template>
    <div>
        <h1>List页面</h1>
    </div>
</template>

<style scoped>
</style>

components/Add.vue

<script setup>
</script>

<template>
    <div>
        <h1>Add页面</h1>
    </div>
</template>

<style scoped>
</style>

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')

路由使用
App.vue

<script setup>
</script>

<template>
  <div>
    <router-link to="/">Home</router-link>
    <hr>
    <router-link to="/list">List</router-link>
    <hr>
    <router-link to="/add">Add</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

<script setup>
  import { useRouter } from 'vue-router';

  let router = useRouter();

  let myAdd = () =>{
    router.push('/add');
  }
</script>

<template>
  <div>
    <router-link to="/">Home</router-link>
    <hr>
    <router-link to="/list">List</router-link>
    <hr>
    <router-link to="/add">Add</router-link>
    <hr>
    <router-link to="/update">Update</router-link>
    <hr>
    <button @click="myAdd()">Add</button>
    <router-view></router-view>
  </div>
</template>

三、路由守卫
在 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}`);
});