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')
  },
]

---

效果展示

跳转前

 跳转后