vue 3中 页面跳转

z1. 普通函数的页面跳转

2.箭头函数的实现方法

在router  文件夹下的 index.vue文件添加 ' /my ' 路由 

{
    path: '/my',
    component: () => import('@/views/my'),
    hidden: true
  },

在 permission.js白名单文件下 添加 '/my'

const whiteList = ['/login', '/register',  '/forget_pwd', '/index', '/my']

注 ：下面是 Vue Router 的组件，用于处理 Vue 应用中的路由功能。它们通常用于定义路由的视图和链接。

•  是一个用于展示匹配路由组件的占位符。
• <一> 嵌套路由

• 1. 路由路径和组件的关系

  在 Vue 应用中，路由路径（例如 /home、/about）与组件（例如 HomeComponent、AboutComponent）是关联的。

  const routes = [
    { path: '/', component: HomeComponent },
    { path: '/about', component: AboutComponent }
  ]

  2. 路由视图占位符

• 是一个占位符，用于告诉Vue Router 在这个位置渲染当前路由匹配的组件。可以把它理解为一个动态的容器，负责显示与当前路径相匹配的组件。

• 3. 路由视图占位符

当用户在浏览器中导航到不同的路径时。Vue Router 会根据路由配置找到对应的组件，并将这些组件渲染到 中 。列如：

当用户访问 / 路径时，HomeComponent 会被渲染到 位置

当用户访问 /about 路径时，AboutComponent 会被渲染到 位置

        4. 示例

假设你有一个简单的Vue 应用，有两个页面：主页面和关于页。路由配置如下

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
]

• 当用户访问 / 路径时，HomeComponent 会被渲染到 位置

• 当用户访问 /about 路径时，AboutComponent 会被渲染到 位置

• <二> 命名视图 ：允许你在一个页面中同时展示多个 ，每个  可以渲染不同的组件。

• 1.当用户访问路径 /dashboard 时，vue router 会同时渲染所有与该路径相关的组件到各自的命名视图中。所有的组件会同时被填充内容，而不是按某种顺序或条件来渲染。

• 2. 假设有以下路由配置

• // router/index.js
  import { createRouter, createWebHistory } from 'vue-router'
  import HeaderComponent from '../components/HeaderComponent.vue'
  import MainComponent from '../components/MainComponent.vue'
  import FooterComponent from '../components/FooterComponent.vue'
  
  
  const routes = [
  
      {
         path: '/dashboard',
         components: {
             header: HeaderComponent,
             main: MainComponent,
             footer: FooterComponent
          
          }
  
      }
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router

  以及对应的Vue组件模板

  HeaderComponent.vue：

  MainComponent.vue：

  FooterComponent.vue：

•  是一个用于生成导航链接的组件，使得用户可以通过点击链接来改变当前的路由。