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

前言

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

实现步骤

1、创建Vue3项目

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

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

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

3、修改路由文件

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

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

  • 路由重定向redirect:

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

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

  • 如果没有加重定向:

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

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

  • 路由代码如下:

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

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

相关推荐
阳光是sunny31 分钟前
LangGraph实战教程:预定义状态MessagesState与AgentState
前端·人工智能·后端
程序软件分享1 小时前
多语言DAPP综合盘交易所系统源码搭建剖析
vue.js·金融·开源
GuWenyue1 小时前
等AI回复卡顿到劝退?Vue3+DeepSeek流式输出实战,70行代码实现打字机效果
前端·人工智能·客户端
Jackson__1 小时前
AI Agent 的能力从哪里来?一文讲清后训练、上下文学习和外部能力
前端·agent·ai编程
默_笙1 小时前
🎉 AI 项目里为什么需要 BFF?因为我实在不想在前端处理二进制流
前端·javascript
Revolution611 小时前
改一个订单筛选,为什么要在六个目录里来回找,前端项目目录到底要怎么拆
前端·前端工程化
阳光是sunny1 小时前
LangGraph高级教程:Multi Schema多状态管理详解
前端·人工智能·后端
mCell2 小时前
从 TodoList 到 Microsoft To Do:全栈工程师到底要管什么?
前端·编程语言·全栈
阳光是sunny2 小时前
LangGraph实战教程:状态管理与`graph.invoke`入参深度解析
前端·人工智能·后端