Vue 路由跳转方式总结
发布网友
发布时间：2024-10-08 07:26
共1个回答
热心网友
时间：2024-10-10 17:16
一、router-link标签跳转
1. 不带参数
在使用router-link时，可以使用name或path属性进行路由跳转，建议使用name属性。
注意：当router-link中的链接以'/'开始时，表示从根路由开始跳转；如果不带'/'，则从当前路由开始。
2. 带参数
可以使用params或query进行参数传递。
params传递类似于post请求，路由配置需包含动态路径参数（如path: "/home/:id" 或 path: "/home:id"）；query传递类似于get请求，页面URL后会显示参数。
在HTML中，可以通过$ route.query或this.$route.query获取参数；在script中，通过this.$route.params或this.$route.query获取参数。
区别：query和params
query参数类似于get请求，跳转后URL会显示参数，适用于非重要参数的传递；密码等敏感信息建议使用params传递，跳转后URL不会显示参数，且刷新页面参数保持不变。
二、this.$router.push()函数调用
1. 不带参数
使用this.$router.push('/home')或this.$router.push({name:'home'})进行路由跳转。
2. query参数
使用this.$router.push({name:'home',query: {id:'1'}})或this.$router.push({path:'/home',query: {id:'1'}})进行跳转。
获取参数方式与router-link相同。
三、this.$router.replace()函数调用
用法与this.$router.push()相似，区别在于不会在history栈中添加记录，点击返回时会跳转到上上个页面，相当于直接替换当前页面。
四、this.$router.go(n)方法调用
此方法可以向前或向后跳转n个页面，n为正整数或负整数。
例如：this.$router.go(0)表示当前页，this.$router.go(-1)表示上一页，this.$router.go(1)表示下一页。
区别：push与replace
push跳转到指定URL路径，并在history栈中添加记录，点击后退会返回到上一个页面；replace跳转到指定URL路径，但history栈中不会有记录，点击返回会跳转到上上个页面，即直接替换当前页面。
最后，关于Vue路由配置和懒加载，可以使用webpackChunkName属性将组件按组分块，例如：
const Index = () => import('@/components/index')
通过指定相同的webpackChunkName属性，可以将多个组件合并打包成一个js文件，实现组件的懒加载。
