首页 前端知识 vue 3中 页面跳转

vue 3中 页面跳转

2024-09-04 23:09:16 前端知识 前端哥 917 327 我要收藏

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)与组件(例如 HomeComponentAboutComponent)是关联的。

    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> 是一个用于生成导航链接的组件,使得用户可以通过点击链接来改变当前的路由。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17658.html
标签
评论
发布的文章

javascript jQuery

2024-09-21 22:09:33

【若依】表格固定列宽

2024-09-21 22:09:30

Knockout-jQueryUI 使用指南

2024-09-21 22:09:29

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!