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

前言

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

实现步骤

1、创建Vue3项目

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

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

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

3、修改路由文件

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

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

  • 路由重定向redirect:

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

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

  • 如果没有加重定向:

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

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

  • 路由代码如下:

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

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

相关推荐
naildingding17 分钟前
3-ts接口 Interface
前端·typescript
mONESY18 分钟前
JavaScript 栈、队列、数组与链表核心知识点总结
javascript·面试
小小前端仔LC24 分钟前
Node.js + LangChain + React:搭建个人知识库(六)- “吃什么”项目实战:从700+菜谱入库到Taro H5端JSON渲染
前端·后端
ZengLiangYi25 分钟前
TypeScript 项目配置:tsconfig、ESM、路径别名
javascript·typescript·aigc
晓131341 分钟前
【Cocos Creator 3.x】篇——第二章 入门
前端·javascript·游戏引擎
想要成为糕糕手1 小时前
前端必修课:JavaScript 数组与数据结构底层逻辑全解析
javascript·数据结构·面试
程序员黑豆1 小时前
AI全栈开发之Java:怎么配置Java环境变量
前端·后端·ai编程
xiaofeichaichai1 小时前
React Hooks
前端·javascript·react.js
数据知道1 小时前
C++ 层拦截:修改 Blink 引擎与 V8 绑定的底层逻辑
javascript·数据采集·指纹浏览器·风控
问心无愧05132 小时前
ctf show web入门110
前端·笔记