Router学习

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

<script setup>
</script>

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

<style scoped>
</style>components/List.vuecomponents/List.vue

• 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>
  

  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

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

  二、编程式

  普通路由

  • <router-link to="/list">list页</router-link>这种路由,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 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

    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}`);
       });