quasar跳转页面详细教程

原创已于 2022-10-21 19:25:19 修改 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #vue.js #前端 #前端框架

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

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

文章目录

前言
步骤

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

二、将跳转后的页面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')
  },
]