vue路由两种方式
本篇文章给大家谈谈vue中路由有哪些参数，以及vue路由两种方式对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
1、(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）
2、vue路由加载触发哪些路由函数
3、详解vue 路由跳转四种方式 (带参数)
4、vue 路由传参数和隐藏参数
(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）
路由配置：
页面：
路由地址，采用query传参方式：?参数1=XXX参数2=XXX
params参数
query参数
插播传送门=Vue Router 的params和query传参的使用和区别（详尽）
$router返回的是当前项目中的路由器对象。
$route返回的是当前路由信息。
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js 是vue的配置文件，必须创建在demo根目录下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下。
@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。
vue路由加载触发哪些路由函数
1、全局的路由钩子函数
1.1、beforeEach（全局前置钩子），意思是在每次每一个路由改变的时候都要执行一遍
它有三个参数：
to： route：即将要进入的目标 路由对象
from：route：当前导航正要离开的路由
next：function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法
应用场景：
1、进行一些页面跳转前的处理，例如跳转到的页面需要进行登录才可以访问时，就会做登录的跳转
2、进入页面登录判断、管理员权限判断、浏览器判断
1.2、afterEach（全局后置钩子）
beforeEach是在页面加载之前的，而afterEach是在页面加载之后的，所以这些钩子是不会接受next函数，也不会改变导航本身
2、单个路由内的钩子函数
2.1、beforeEnter
可以直接在路由配置上直接定义beforeEnter，这些守卫与全局前置守卫的方法参数是一样的
3、组件内的路由钩子函数
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
应用场景
1、清除组件中的定时器
2、当页面有未关闭的窗口，或未保存的内容时，阻止页面跳转
3、保存相关内容到Vuex和Session中
详解vue 路由跳转四种方式 (带参数)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
ps : 区别
this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params 例如：/user/:id → /user/2044011030 → this.$route.params.id
路由查询参数 this.$route.query 例如：/user/search?name=sf → this.$route.query.name
参考：
vue 路由传参数和隐藏参数
vue中路由中需要传递参数的话可以用query和param传递，两者类似于get和post。前者地址栏类似xx?p=1后者为xx/1，且后者可以隐藏地址栏显示。其实也可以用vue推荐的vuex进行响应式的参数管理。
两者传递参数需要router/index.js进行配置：
只需要去掉修改path即可，但是刷新会丢失数据，可以通过localstorage解决刷新问题。
vue中路由有哪些参数的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue路由两种方式、vue中路由有哪些参数的信息别忘了在本站进行查找喔。
