history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
2、可是,有时候不能直接禁用,而是要返回指定的路由地址,于是:
mounted() {
if (window.history && window.history.pushState) {
// 向历史记录中插入了当前页
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.goback, false);
destroyed() {
window.removeEventListener('popstate', this.goback, false);
其中this.goback()是mothods中的方法,可以自定义返回地址,例如:
goback: function() {
this.$router.push({
path: '/orderdetails',
history.pushState(null, null, document.URL);
3、以上两个方法出现的情况都是因为浏览器有记录跳转路由,因为之前基本路由跳转都是用的router.push(),后来看了一下官网才知道,其实可以直接使用router.replace(),跟router.push很像,唯一的不同就是,他不会向history添加新记录,而是跟他的方法名一样,替换掉当前的history记录,他有两种方式:
①:声名式
<router-link :to="..." replace>
②:编程式
router.replace(...)
需要注意的是,如果目的地和当前路由相同,只有参数发生了改变,则需要使用beforeRouteUpdate来响应这个变化
由于使用路由参数时,原来的组件实例会被复用,组件的生命周期钩子也不会再被调用。
所以,复用组件时,想对路由参数的变化做出响应的话,可以简单的watch(检测变化)$route对象:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
或者使用2.2中引入的beforeRouteUpdate导航守卫:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
捕获所有路由或404 Not found路由
// 会匹配所有路径
path: '*'
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' }
通常用于客户端 404 错误。
当使用一个通配符时,$route.params
内会自动添加一个名为 pathMatch
参数。它包含了 URL 通过通配符被匹配的部分:
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'