quasar跳转页面详细教程

quxiaoke-1

已于 2022-10-21 19:25:19 修改

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签：开发语言 vue.js 前端前端框架

于 2022-10-21 19:21:11 首次发布

本文链接：https://blog.youkuaiyun.com/roll_king/article/details/127452110

本文介绍了如何在Quasar项目中设置路由，实现页面间的跳转。首先在App.vue中引入`<RouterView>`组件，然后在需要跳转的页面如home.vue中使用`<RouterLink>`指定目标页面（这里是login），最后配置路由文件，定义各个页面的路径和对应的组件。通过这些步骤，可以成功实现在Quasar应用中的页面跳转功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
步骤

一、将要展示的页面放入主页面

二、将跳转后的页面link到跳转前的页面中

三、配置路由文件

效果展示

跳转前跳转后

前言

quasar作为vue的集成框架，在vue语法的基础上，我们怎么在quasar项目中编写路由程序，使页面完成跳转呢？

步骤

一、将要展示的页面放入主页面

//App.vue
<template>
 <RouterView></RouterView>
</template>

二、将跳转后的页面link到跳转前的页面中

//home.vue
<template>
    <div class="home-container">
      <RouterLink to="login">登录</RouterLink>  //login是跳转之后页面的name
    </div>
</template>

三、配置路由文件

const routes = [
  {
    path: '/',
    component: () => import('../pages/home.vue')
  },
  {
    path: '/login',
    component: () => import('../pages/login.vue')
  },
]