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

前言

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

实现步骤

1、创建Vue3项目

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

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

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

3、修改路由文件

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

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

  • 路由重定向redirect:

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

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

  • 如果没有加重定向:

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

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

  • 路由代码如下:

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

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

相关推荐
hiahiahia12318 分钟前
Streaming Model Output
开发语言·前端
paopaokaka_luck19 分钟前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩29 分钟前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo34 分钟前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记
前端架构师-老李36 分钟前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
SEO_juper37 分钟前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js40 分钟前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发
Nymph_Zhu44 分钟前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome8881 小时前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
计算机魔术师1 小时前
科技巨头砸7400亿押注AI,为什么苹果成了唯一赢家?
前端