首页 > 其他分享 >Vue router路由设计

Vue router路由设计

时间:2024-03-01 18:44:36浏览次数:22  
标签:Vue SignUp js vue 组件 router 路由

这里的路由是指的页面之间的路径管理器,简单的理解为 vue-router 就是链接路径的管理系统。vue-router 是 Vue.js 官方的路由插件,它和 vue.js 是深度集成的,适合用于构建单页面应用。vue-router 就是将组件映射到路由上面。在 vue-router 单页面应用中,是路径之间的切换,也就是组件的切换。

vue router 路由配置

组件设计

在 Vue 中,路由的配置都是在 router 中的 index.js 中进行的配置。

例如:

首先在 components 创建两个 Vue 组件,分别是 SignIn.vue 和 SignUp.vue。这两个文件的内容分别是

SignIn.vue

<template>

    <div class='login-form'> 

        <h1>登录</h1>

        <v-text-field label="用户名"></v-text-field>

        <v-text-field type="password" label="密码"></v-text-field>

        <v-btn color='primary'>登录</v-btn>

        <v-btn color='primary' text>注册</v-btn>

    </div>

</template>

SignUp.vue

<template>

    <div class='sign-up'>

        <h1>注册</h1>

        <v-text-field lable="用户名"></v-text-field>

        <v-text-field lable="密码" type='password'></v-text-field>

        <v-text-field lable="邮箱"></v-text-field>

        <v-btn color='primary'>注册</v-btn>

        <v-btn color='primary' text>去登陆</v-btn>

    </div>

</template>

这两个页面分别是登录界面和注册界面,这就需要用到 router 中的 index.js 文件来管理路由了。

路由配置

首先我们在已有的项目中找到 index.js 的文件,默认内容如下:

// 配置路由规则

const routes = [

  {

    path: '/',   // 网页的的根路径,即首页

    name: 'Home',  // 唯一标识,用于识别作用

    component: Home   // 关联组件

  },

  {

    path: '/about',

    name: 'About',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    component: function () {

      return import(/* webpackChunkName: "about" */ '../views/About.vue')

    }

  }

]

现在将上述的 SignIn.vue 和 SignUp.vue 两个组件进行配置。

首先是要在 index.js 里面配置两个组件的路由

1、在 index.js 导入这两个组件

import SignIn from '../components/SignIn.vue'

import SignUp from '../components/SignUp.vue'

2、在 index.js 配置路由信息

  {

    path:'/',          # 这里的 path:'/' 是页面可以访问的路径

    name:'SignIn',     # 作为这个路由的标识

    component:SignIn   # 指定组件

  },

  {

    path:'/sign-up',

    name:'SignUp',

    component:SignUp

  }

3、接下来就是如何触发页面之间的跳转,首先是需要在页面下的 <script> 标签下的 methods 创建一个方法,这里命名为 signUp()

代码如下:

<script>

export default {

    methods: {

            signUp(){

            this.$router.push({name:'SignUp'})  # 这里的 name:'SignUp' 是在 index.js 路由配置 name

        }

    }

}

4、给控件绑定一个事件,这里使用 @click='signUp()' 监控点击事件。当点击这个 button 的时候,就会触发 signUp 方法。

<v-btn color='primary' text @click="signUp()">注册</v-btn>

vue router 路由设计就先说到这里啦,大家可以多多练习一下哦~

标签:Vue,SignUp,js,vue,组件,router,路由
From: https://www.cnblogs.com/hogwarts/p/18047720

相关文章

  • vue3+vite,封装 echarts 组件以及如何使用
    1.封装echarts组件1.安装echarts所需npm包,如下。[email protected]@3.1.0//社区图等npmi@vueuse/[email protected]//一些好用的hook2.封装echarts组件1.在component目录下新建Echarts文件夹2.在Echarts文件夹下新建config文件夹(......
  • vue项目引入高德地图报错:Map container div not exist (火狐浏览器不加载地图)
    问题描述:谷歌浏览器正常显示地图,火狐浏览器不加载,并且报错:  Mapcontainerdivnotexist错误代码如下:  修改后代码如下:  参考大佬:https://blog.csdn.net/white_777/article/details/128286558  ......
  • MediaTek Filogic 系列路由器串口救砖教程
    感谢蝈蝈大佬开发的mtk_uartboot工具,这样就可以随便刷砖了适用系列:MediaTekMT7622、MT7981、MT7986、MT7988SoC1.下载工具地址:https://github.com/981213/mtk_uartboot/releasesWindows用户选择mtk_uartboot-x86_64-pc-windows-msvc.zipLinux用户选择mtk_uartboot-......
  • Vue3通过provide/inject设置全局变量
    在Vue3中,你可以使用组合API来注入和使用全局变量。组合API提供了一种更灵活的方式来组织和重用组件逻辑,包括全局状态的管理。以下是在Vue3中使用组合API来注入和使用全局变量的基本步骤:创建全局变量:在一个单独的文件中,创建全局变量并导出它,使其可在整个应用中使用......
  • 小程序开发:app.vue检测更新时判断是否是朋友圈进入
    因为如果从朋友圈点进小程序来的,有些功能就用不了,所以需要判断下是否从朋友圈点进来的。检查代码如下:checkScene(){//判断场景值如果是从分享到朋友圈再打开就会有一些功能无法使用//详见https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share......
  • Vue学习笔记31--自定义指令--函数式
    Vue学习笔记-自定义指令<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>自定义指令</title&......
  • Vue3组件库搭建及测试
    一、搭建Vite环境1.创建目录&初始化包配置&安装Vite依赖mkdirgresgying-uicdgresgying-uinpminitnpmivite-D2.根目录创建index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Gresgyi......
  • Flutter 定义局部路由 Navigator
    Flutter中,通常我们使用Navigator来管理全局的页面路由,在整个应用中维护一个路由堆栈。但是,有些情况下你可能需要一个局部路由,也就是在应用的某个部分内部维护一个独立的路由堆栈,而不影响全局路由。为了实现这一点,你可以在你的应用中创建一个新的Navigator局部路由简单使用......
  • Vue学习笔记30--v-pre
    v-pre指令:1.跳过其所在节点的编译过程2.可利用v-pre跳过:没有使用指令语法、没有使用插值语法点节点,会加快编译。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-s......
  • Taurus.MVC WebMVC 入门开发教程6:路由配置与路由映射
    前言:在本篇Taurus.MVCWebMVC入门开发教程的第六篇文章中,我们将讨论如何配置路由并映射到控制器和操作方法。路由是决定应用程序如何响应客户端请求的重要组成部分,因此在Web开发中非常重要。我们将继续使用Taurus.Mvc命名空间,并探讨如何在应用程序中配置路由。步骤1:了......