当前位置:首页 » 《休闲阅读》 » 正文

vue 3中 页面跳转

15 人参与  2024年11月10日 19:21  分类 : 《休闲阅读》  评论

点击全文阅读


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.jsimport { 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> 是一个用于生成导航链接的组件,使得用户可以通过点击链接来改变当前的路由。


点击全文阅读


本文链接:http://zhangshiyu.com/post/184361.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1