首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3页面跳转

vue3中页面跳转两种实现方式

2024-09-03 08:58:07 作者：治金的blog

在Vue3中Vue Router是一个常用的路由管理库,它提供了一种简单而强大的方式来实现路由跳转和导航,这篇文章主要给大家介绍了关于vue3中页面跳转的两种实现方式,需要的朋友可以参考下

z1. 普通函数的页面跳转

<template>
  <router-view></router-view>
  <router-link to="/">首页</router-link>
  <button @click="go">我的</button>
</template>

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

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

// 定义 go 函数以便路由跳转
function go() {
  router.push({ path: '/my' })
}

// 将 go 函数暴露给模板
</script>

2.箭头函数的实现方法

<template>
  <router-view></router-view>
  <router-link to="/">首页</router-link>
  <button @click="go">我的</button>
</template>

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

// 使用 useRouter 创建一个 router 实例
const router = useRouter()

// 定义 go 函数以便路由跳转
const go = () => {
  router.push('/my')
}
</script>

在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 应用中的路由功能。它们通常用于定义路由的视图和链接。

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

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

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

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

2. 路由视图占位符

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

3. 路由视图占位符

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

当用户访问 / 路径时，HomeComponent 会被渲染到 <router-view> 位置

当用户访问 /about 路径时，AboutComponent 会被渲染到 <router-view> 位置

4. 示例

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

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

<template>
  <div>

     <router-view></router-view>
  </div>

</template>

当用户访问 / 路径时，HomeComponent 会被渲染到 <router-view> 位置

<!-- HomeComponent -->
<template>
  <div>

     <h1>Home Page</h1>
  </div>

</template>

当用户访问 /about 路径时，AboutComponent 会被渲染到 <router-view> 位置

<!-- AboutComponent -->

<template>
  <div>

     <h1>About Page</h1>
  </div>
</template>

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

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

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组件模板

<!-- App.vue -->
<template>
  <div>
    <router-view name="header"></router-view>
    <router-view name="main"></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

HeaderComponent.vue：

<template>
  <header>
    <h1>Header</h1>
  </header>
</template>

MainComponent.vue：

<template>
  <main>
    <h2>Main Content</h2>
  </main>
</template>

FooterComponent.vue：

<template>
  <footer>
    <p>Footer</p>
  </footer>
</template>

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

总结

到此这篇关于vue3中页面跳转两种实现方式的文章就介绍到这了,更多相关vue3页面跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！