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

前言

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

实现步骤

1、创建Vue3项目

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

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

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

3、修改路由文件

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

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

  • 路由重定向redirect:

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

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

  • 如果没有加重定向:

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

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

  • 路由代码如下:

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

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

相关推荐
IVEN_7 分钟前
本地正常,Docker 怎么就空白:Next.js SSR 的 Alpine musl DNS 陷阱
前端·docker·next.js
凡人叶枫7 分钟前
Effective C++ 条款24:若所有参数皆须要类型转换,请为此采用 non-member 函数
linux·前端·c++·算法·嵌入式开发
用户887665426639 分钟前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·react.js·web3
an3174212 分钟前
使用 LangGraph + DeepSeek 构建 AI 面试官:状态图设计与实践
前端·ai编程
代码不加糖13 分钟前
MessageChannel是什么,有什么使用场景?
前端·javascript
小小龙学IT17 分钟前
HTMX:让 HTML 重新成为前端核心的超轻量动态交互库
前端·html·交互
星栈18 分钟前
写 Makepad Demo 不难,难的是把它写成项目
前端·rust
用户0595401744619 分钟前
localStorage清除策略踩坑实录:一个过期的token让我排查了3小时
前端·css
Nanachi21 分钟前
跨框架的前端源码定位,再加上点LLM
前端
人无远虑必有近忧!41 分钟前
fetch请求图片报跨域
前端·javascript