手把手教你Vue3实现路由跳转

目录
  • 一、安装 vue-router
  • 二、新建 vue 页面
    • 2.1 login.vue
    • 2.2 register.vue
  • 三、新建路由文件
    • 3.1 新建 index.js
    • 3.2 新建 routes.js
  • 四、在 App.vue 中配置路由的跳转
  • 五、在 main.js 中 use 路由
  • 六、src 目录结构
  • 七、结果
    • 7.1 默认页面
    • 7.2 点击登录
    • 7.3 点击注册
  • 总结

一、安装 vue-router

npm install vue-router@4

二、新建 vue 页面

在 src 目录下新建 view 目录用来存放 vue 的页面。

然后在 view目录下新建两个 vue 页面，分别是 login.vue 和 register.vue。

2.1 login.vue

<template>
  <div>
    当前是登录页面
  </div>
</template>

<script>
export default {
  name: "login"
}
</script>

<style scoped>
</style>

2.2 register.vue

<template>
  <div>
    当前是注册页面
  </div>
</template>

<script>
export default {
  name: "register"
}
</script>

<style scoped>
</style>

三、新建路由文件

在 src 目录下新建 router 目录用来存放路由配置的页面。

3.1 新建 index.js

在 router 目录下新建 index.js 配置路由。

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'    // 导入 router 目录下的 router.js

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
	routes
})
export default router;

目前 routes 里面还没有路由路径等内容，因此我们要再新建一个 routes.js文件。

3.2 新建 routes.js

还是在 router 目录下新建 routes.js

import Register from '@/view/register.vue'
import Login from '@/view/login.vue'

const routes = [
    {
        name: 'login',
        path: '/login',
        component: Login
    },
    {
        name: 'register',
        path: '/register',
        component: Register
    }
];
export default routes

导入刚刚新建的 vue 页面，然后和 path 绑定在一块。

四、在 App.vue 中配置路由的跳转

<template>
<div id = "app">
	<p>
	  <el-button>
            <router-link to="/login">登录</router-link>
	  </el-button>

	  <el-button>
            <router-link to="/register">注册</router-link>
	  </el-button>
	</p>
	<router-view/>
	</div>
</template>

<script>
// App.vue 的名称叫 app
    export default {
        name: 'app'
    }
</script>

注意要使用 router-link 标签来进行路由的跳转。

el-button是这边 Element UI框架的控件，如果没安装，可以不使用。

五、在 main.js 中 use 路由

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index' // 加载 router 底下的 index.js 路由配置文件

const app = createApp(App)
app.use(router)
app.use(ElementPlus) // 没安装 Element UI 可以不用
app.mount('#app')

六、src 目录结构

src
│  App.vue
│  main.js
│      
├─router
│      index.js
│      routes.js
│      
└─view
        login.vue
        register.vue

七、结果

7.1 默认页面

7.2 点击登录

7.3 点击注册

总结

到此这篇关于Vue3实现路由跳转的文章就介绍到这了,更多相关Vue3路由跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue路由传参的两种方式query和params

    Vue路由传参的两种方式query和params 一.router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to=&

  • Vue.js 前端路由和异步组件介绍

    目录 文章目标 P6 P6+ ~ P7 一.背景 二.前端路由特性 三.面试!!! 四.Hash 原理及实现 1.特性 2.如何更改 hash 3.手动实现一个基于 hash 的路由 五.History 原理及实现 1.HTML5 History 常用的 API 2.pushState/replaceState 的参数 3.History 的特性 4.面试!!! 5.手动实现一个基于 History 的路由 六.Vue-Router 1.router 使用 2.动态路由匹配 3.响应路由参数的变

  • vue路由警告:Duplicate named routes definition问题

    vue路由警告:Duplicate named routes definition问题

    目录 警告产生的原因 错误类型 举例说明 静态路由 动态路由 今天在开发的时候,项目报了一个警告  Duplicate named routes definition ,这里记录一下解决方式和思路. 警告产生的原因 根据提示内容,我们大概猜测是和路由的name有关,上网了解了一下,验证了我们的猜测是正确的.警告是由于路由的name 重复导致的.(原理?who care (艹皿艹 )) 错误类型 虽然我们已经知道警告是由于name重复导致,其实细分一下还是有点不一样的. 一是静态路由中的name重

  • vue中使用路由改浏览器标题和图标

    vue中使用路由改浏览器标题和图标

    目录 路由改浏览器标题和图标 第一种方法:设置浏览器标题 第二种方法:设置浏览器标题和图标 创建路由,随路由显示网页标题 一.创建一个新的vue项目 二.路由映射的就是页面 三.接下来就是创建我们这两个页面所需要的路由 四.渲染路由 五.随路由切换改变网页标题 六.创建子路由 路由改浏览器标题和图标 第一种方法:设置浏览器标题 router/index.js 第二种方法:设置浏览器标题和图标 public/index.html 创建路由,随路由显示网页标题 从一个空白页开始创建路由,网页标题随路

  • Vue 项目迁移 React 路由部分经验分享

    Vue 项目迁移 React 路由部分经验分享

    目录 引言 Vue Router: React Router V5: 升级到 React Router V6 引言 最近在把 Vue2.6 的老项目代码迁移到 React,以便统一技术栈更好维护. 首先遇到的难点和思维模式上的转变是:路由的迁移问题.Vue Router 迁移到 React Router,需要怎么支持嵌套的路由? 直观感觉它们之间的异同: Vue Router: 默认使用字面量对象指定路由配置(children 属性嵌套子路由配置); 视图上使用 <router-view/>

  • Vue路由传参详细介绍

    Vue路由传参详细介绍

    目录 路由传参 效果展示 params的类型(后附源码) ​​​​​​query参数的类型 路由name 路由传参 效果展示 通过传参,可以让Persons路由组建中的内容,在新的路由组件Show显示出来,Show路由组件要嵌套到Persons路由组件中 Persons路组件中的内容 params的类型(后附源码) path:‘show/:id/:realname’ :id/:realname,是为传参所声明的,props:true 可以理解成可以传参,这只是其中的一种方法,也是个人觉得最简单理

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

  • 手把手教你Vue3实现路由跳转

    手把手教你Vue3实现路由跳转

    目录 一.安装 vue-router 二.新建 vue 页面 2.1 login.vue 2.2 register.vue 三.新建路由文件 3.1 新建 index.js 3.2 新建 routes.js 四.在 App.vue 中配置路由的跳转 五.在 main.js 中 use 路由 六.src 目录结构 七.结果 7.1 默认页面 7.2 点击登录 7.3 点击注册 总结 一.安装 vue-router npm install vue-router@4 二.新建 vue 页面 在 src

  • 手把手教你搭建vue3.0项目架构

    手把手教你搭建vue3.0项目架构

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完全重写了一遍.虽然名字叫cli,其实两个库都是基于vue-cli创建的.做这个的目的是为了工作中快速启动项目,毕竟切片打包.less.axios.vuex.router.UI框架.基础文件目录.权限,这些都是基操,当然项目不同,还是要做些调整的.这两个项目的master分支都是最基础的东西,里面还包

  • Vue3使用vue-router如何实现路由跳转与参数获取

    目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({

  • 手把手教你从零开始react+antd搭建项目

    手把手教你从零开始react+antd搭建项目

    之前的文章都是自己的学习日志,主要是防止自己遗忘之前遇到的坑.这次将从最基础的项目搭建开始讲起,做一个基于react和antd的后台管理系统.我会一步步进行下去,所以看完本文你哪怕不了解react,应该也会使用react做一个简单的项目.话不多少,直接开始.完整项目请前往GitHub查看,体验请点击这里.如果觉得可以请给一颗star,谢谢各位. 1.开发环境: node.js -v 12.16.3 create-react-app -v 3.4.1 antd -v 4.3.3 项目开始前请自行全

  • 手把手教你用Hexo+Github搭建属于自己的博客(详细图文)

    手把手教你用Hexo+Github搭建属于自己的博客(详细图文)

    在大三的时候,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近比较有空,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了? 哈哈,大概是为了装逼吧,同时自己搭建博客的话,样式的选择也比较自由,可以自己选择,不需要受限于各大平台. 转载请注明原博客地址:手把手教你用Hexo+Github 搭建属于自己的博客 大概可以分为以下几个步骤 搭建环境准备(包括node.js和git环境,gitHub账户的配置) 安装Hexo 配置Hexo 怎样将Hex

  • 手把手教你配置一台Linux虚拟机

    手把手教你配置一台Linux虚拟机

    手把手教你配置一台Linux虚拟机 前言: Linux distribution 越来越多,也越来越成熟,所以安装起来也是比较简单,但是要理解安装的每一个步骤还是需要对Linux的基础知识有一定的了解,不过不用很深入,如果很深入我也不会.这里我选择的安装方式都是最简单的,在磁盘分区最重要的步骤也是以最简单的方式分区. 本次Linux配置的目的不是作为商业用途,而是在于新手熟悉Linux的操作系统,使新手能自己在本地配置Linux系统. 选择distrubution版本,因为我们是把Linux作为

  • 手把手教你写一个微信小程序（推荐）

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • 手把手教你如何安装Pycharm(详细图文教程)

    本文介绍了手把手教你如何安装Pycharm,分享给大家,具体如下: 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载PyCharm安装包,根据自己电脑的操作系统进行选择,对于windows系统选择下图的框框所包含的安装包. 2.选择Windows系统的专业版,将其下载到本地,如下图所示: 3.双击下载的安装包,进行安装,然后会弹出界面: 4.选择安装目录,Pycharm需要的

  • 手把手教你用Java实现一套简单的鉴权服务

    手把手教你用Java实现一套简单的鉴权服务

    前言 时遇JavaEE作业,题目要求写个简单web登录程序,按照老师的意思是用servlet.jsp和jdbc完成.本着要么不做,要做就要做好的原则,我开始着手完成此次作业(其实也是写实训作业的用户鉴权部分),而之前写项目的时候也有相关经验,这次正好能派上用场. 一.何为鉴权服务 引用百度百科的话说 鉴权(authentication)是指验证用户是否拥有访问系统的权利. 鉴权包括两个方面: 用户鉴权,网络对用户进行鉴权,防止非法用户占用网络资源. 网络鉴权,用户对网络进行鉴权,防止用户接入了非

  • Python趣味实战之手把手教你实现举牌小人生成器

    Python趣味实战之手把手教你实现举牌小人生成器

    Selenium库的安装与简单使用  1. 安装selenium库 pip install selenium 结果如下: 2. chromedriver驱动的配置 如果你想要驱动谷歌浏览器,自动打开浏览器,必须匹配chromedriver驱动,否则会报错. 配置chromedriver驱动,一定要注意 "驱动" 和 "谷歌浏览器" 版本一定是要相匹配,否则不能使用. ① 检查谷歌浏览器的版本 这里首先提供一个详细的地址供大家查看: https://jingyan.b

随机推荐