【第五章】-CSDN博客

本文介绍了Vue.js的路由管理库vue-router的基本使用，包括安装、创建路由、编程式导航、路由参数传递、命名视图以及全局路由守卫的设置。同时，提到了路由滚动行为的配置和在模板中解构路由信息的方法。

摘要由CSDN通过智能技术生成

路由的基本使用

1.安装

 npm i vue-router

2.使用

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})
export default router;

main.ts

import router from "./router";
app.use(router);

基本配置

 routes: [
    {
      path: '路由路径',
      component: '路由组件',
      name:'路由名称',
      children:[{'子路由配置'}],
      meta:{'自定义属性'},
      // 路由重定向
      // 字符串形式
      // redirect: '/left',
      // 对象形式
      /*  redirect: {
         path: '/left'
       }, */
      //  函数形式 to为父路由信息
      redirect: to => {
        console.log(to);
        to.query = { name: '张三' }
        return {
          path: '/left',
          query: to.query
        }
      },
      ......
    },
 ]

编程式导航

push 与 replace(不记录历史)

import { useRouter } from 'vue-router'
const router = useRouter()
//replace 用法一致
router.push('/user')
router.push({
     // path:'/user'
     name:'user'// 路由 name 属性
})

go 与 forward back

  // 前进  接收一个参数 前进或后退的页面数  可以为负数
  router.go(1)
  //前进一个页面
  router.forward()
  // 后退一个页面 无参数
  router.back()

路由参数传递

query 与 params

const toDetail = (item: Item) => {
  // 传递 query参数
  /*  router.push({
    path: '/reg',
    query: item
  }) */
  // 传递 params参数  必须用 name  不建议使用，推荐pinia
  router.push({
    name: 'Reg',
    params: {
      id: item.id,
      name: item.name,
      price: item.price
    }
  })
}

命名视图

指定路由组件的展示位置

router-index.ts

 routes: [
    {
      path: '/',
      component: () => import('@/component/Select.vue'),
      children: [
        {
          path: 'left',
          components: {
            // 默认显示视图位置
            default: () => import('@/component/A.vue')
          }
        },
        {
          path: 'right',
          components: {
            // 指定显示视图位置
            B: () => import('@/component/B.vue'),
            C: () => import('@/component/C.vue')
          }
        }
      ]
    }
  ],

<template>
  <div>Select 组件</div>
  <router-link to="/left">左边</router-link>
  <router-link style="margin-left: 10px" to="/right">右边</router-link>
  <router-view></router-view>
  <!-- 命名视图 -->
  <router-view name="B"></router-view>
  <router-view name="C"></router-view>
</template>

全局路由守卫

beforeEach 与 afterEach

const pathArr = ['/']
// 路由前置守卫
router.beforeEach((to, from, next) => {
  if (pathArr.includes(to.path) || localStorage.getItem('token')) {
    next()
  } else {
    next('/')
  }
})
// 路由后置守卫
router.afterEach((to, from) => {
  document.title = to.meta.title as string
})

路由视图插槽结构出路由信息与组件

<template>
  <!-- vue-router 4.0 解构出路由对象和组件 -->
  <router-view #default="{ route, Component }">
    <transition enter-active-class="animate__animated animate__fadeIn">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

路由滚动行为

// 滚动行为 仅当浏览器箭头导航触发生效(go与back)
// savePosition  滚动条距离顶部的高度
  scrollBehavior: (to, form, savePosition) => {
    if (savePosition) {
      console.log(savePosition);
      return savePosition
    } else {
      return {
        top: 0
      }
    }
  },