vue3router详解和用法（Vue-router实际使用和js方式跳转）
本文目录
Vue-router实际使用和js方式跳转
1.原生方式:
2.vue-router跳转路由：
1.传递参数：在路径中标记动态参数名字 /:name
2.路由中传递参数
3.在跳转后的页面接收参数值(两种get/post)
4.追加路由(两种写法)
vue-router原理详解
首先vue-router实现了 在无需刷新页面的情况下更新视图
对比：location.href=""实现了跳转但是刷新了页面
在浏览器环境下的两种方式，分别就是在HTML5History，HashHistory两个类中实现的。
两个模式hash和history
原理：
移动端采用WebView加载Vue单页应用时，要采用hash模式
解释：
我们理想的情况是通过index.html进入页面，后续的操作都由ajax完成，但是如果遇到用户直接在地址栏中输入然后回车或者强行重新加载等操作
通过上面例子，我们可以知道history模式会像服务器发起请求，这时如果服务端没有匹配的路由处理，则报错；如果请求了某一个接口的数据，则有可能显示返回值json串。
解决方案：
a. 前端设置一个通用路由重定向到html页
b. 后端在接收到没有配置的请求的时候返回401或别的状态码
c. 使用token
Vite+Vue3+Vue-Router@4+Pinia 快速起步
vite 相当于 vue-cli 脚手架，因此应该首先安装它：
然后按照提示选择选项完成创建
接着进入项目目录 vite-project ，并安装一下依赖：
依然是在项目目录内：
然后创建 router/router.js 文件：
再回到 main.js 文件，引入带路由表的路由实例，并以插件形式使用：
在 src 下创建目录 pages ，用于存放页面，并且在其中任意创建两个文件 home.vue 和 About.vue
并且修改 App.vue 页面以供页面渲染：
同样是在项目根目录：
再创建 pinia/pinia.js :
然后在 main.js 中引入，并以插件形式使用：
创建 pinia/store.js :
在About组件修改state数据，在Home组件显示state数据
修改一下Home组件：
再修改一下About组件：
更多文章：
excel表格中，如何匹配单元格中含有通配符“*“？EXCEL SUBSTITUTE 通配符
2026年9月20日 21:45
2026年9月5日 18:30
2026年8月3日 21:15
2026年2月27日 07:15
2025年10月24日 03:30
tcpip有多少个协议（tcpip参考模型中应用层协议常用的有）
2026年1月18日 15:45
2026年6月6日 21:45
qq聊天音乐代码（qq发信息有音乐符号，点一下它出来一首歌）
2025年12月24日 17:15
SAP是一个什么行业_sap是干什么的？南京雨润集团sap岗位怎么样
2026年8月6日 18:15
2025年9月8日 05:00
2026年7月21日 15:30
ajax提交form表单失败（layui的以ajax提交表单不成功问题）
2026年9月3日 04:15
php运行环境安装（server2008如何部署iis+php+mysql运行环境）
2025年9月24日 02:45
2025年10月12日 02:45
simulink安装包下载（谁有关于光热发电的simulink仿真或其他仿真）
2026年3月2日 01:30
2026年1月11日 00:30
2025年12月1日 14:30
大漠易语言模块（大漠插件易语言模块为什么分辨率变化了.鼠标移动到坐标就不对了）
2026年3月12日 03:45
2026年4月2日 21:45
