Vue3:通过路由写多个页面,通过不同的路径可以进入不同的页面

前言

Vue3:想通过路由写2个页面,不同的路径可以进入不同的页面

实现步骤

1、创建Vue3项目

通过脚手架创建一个Vue3的项目,然后在此基础上对文件进行增删改,修改成自己需要的项目框架

2、views文件夹 对应 页面文件

  • 如果需要写2个页面,则在views文件夹里面创建2个.vue文件
  • 可以在.vue文件里面书写对应的代码,也可以引入组件:

3、修改路由文件

在router文件夹下的index.js文件里面,书写每个页面文件对应的路径

  • 不同的页面文件对应的路径和名字是不同的

  • 路由重定向redirect:

    执行根目录路由地址时,跳转执行对应的路由地址 ,进而把对应的组件给显示出来

    运行完项目之后,默认会打开page1的页面:

  • 如果没有加重定向:

    运行完项目之后打开的默认页面如下:

4、输入不同的路径进入不同的页面

  • 路由代码如下:

  • 运行项目后默认的页面如下:

  • 修改路径,进入另一个页面:

相关推荐
codingWhat16 分钟前
uniapp 多地区、多平台、多环境打包方案
前端·架构·node.js
H04819 分钟前
symbol为什么说是为了解决全局变量冲突的问题
javascript
HelloReader19 分钟前
从 Tauri 2.0 Beta 升级到 2.0 Release Candidate Capabilities 权限前缀与内置 Dev Server 网络策略变
前端
只与明月听1 小时前
RAG深入学习之Chunk
前端·人工智能·python
一枚前端小姐姐1 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
HelloReader1 小时前
Tauri 1.0 升级到 Tauri 2.0从“能跑”到“跑得稳”的迁移实战指南(含移动端准备、配置重构、插件化 API、权限系统)
前端
Always_Passion1 小时前
FE视角下的Referrer全面解析
javascript·面试
apollo_qwe2 小时前
深入解析Vue的mixins与hooks:复用逻辑的两种核心方式
vue.js
JunjunZ2 小时前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven2 小时前
React 19 深度解析:Actions 与 use API 源码揭秘
前端