router中push的几种用法,catch方法的实现原理

router中push的几种用法

路由设置部分
 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import main from '@/components/main'
import one from '@/components/one'
import two from '@/components/two'
import three from '@/components/three'


Vue.use(Router)

export default new Router({
    mode:'history',
  routes: [
    {
      path:'/',
      redirect:'/main'
    },
    {
        path:'/main',
        component:main,
        children:[
            {
                path:'/one',
                component:one
            },
            {
                path:'/two/:id',
                name:'two',
                component:two
            },
            {
                path:'/three',
                name:'three',
                component:three
            }
        ]
    }
  ]
})


main界面

<template>
    <div class="main">
        <button @click="btn1()">点击我实现页面跳转1</button>
        <button @click="btn2()">点击我实现页面跳转2</button>
        <button @click="btn3()">点击我实现页面跳转3</button>
        <router-view></router-view>
    </div>
</template>

<script>
export default{
    name:'main',
    methods:{
        //所呈现形式为/one
        btn1(){
            this.$router.push({
                path:'/one'
            })
        },
        //所呈现形式为/two/123  取数据方式为 this.$route.params.id
        btn2(){
            this.$router.push({
                name:'two',
                params:{
                    id:'123'
                }
            })
        },
        //上下两种前面一种需要去路由器里面配置:id     query可以直接进行参数设置不需要再去路由里面配置
        //所呈现形式为/three?id=444&name=zhangsan   取数据方式为 this.$route.query.id
        btn3(){
            this.$router.push({
                path:'/three',
                query:{
                    id:'444',
                    name:'zhangsan'
                }
            })
        }
    }
}
</script>

<style>
</style>

Vue——Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案 

一、router.push()

        想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL

声明式: <router-link :to="...">

编程式:router.push(...)

 

二、router.replace()

        跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式: <router-link :to="..." replace>

编程式:router.replace(...)

三、router.go()

        这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似window.history.go(n) 

 

        这次主要是在做下单那一块用push方法导致路由陷入了死循环,商品详情---push---下单页---push----支付页----push---订单列表页,订单列表页按返回会返回到支付页,再按支付页的返回键(返回写的push路由到订单列表页),这样整个流程就陷入了死循环,这绝对是不允许的。再次查看了vue的router文档,于是看到了replace方法,泪奔,为啥之前没注意到咧 

        新的思路商品页---push---下单页-----replace----支付页-------replace------订单列表页,这样就不会陷入死循环了,也不会在支付订单后可以再退回到支付页和下单页了。

catch方法的实现原理


catch是用来做编程异常处理,他会判断你的语句是否有错误,有错误就会返回错误

 

更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式:

(1)利用URL中的hash("#");

(2)利用History interface在HTML5中新增的方法;

1、Hash模式: 
      hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;

2、History模式: 

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面;

通常情况下,我们会选择使用History模式,原因就是Hash模式下URL带着‘#’会显得不美观;但实际上,这样选择一不小心也会出问题;比如:
但当用户直接在用户栏输入地址并带有参数时: 
Hash模式:xxx.com/#/id=5 请求地址为 xxx.com,没有问题; 
History模式: xxx.com/id=5 请求地址为 xxx.com/id=5,如果后端没有对应的路由处理,就会返回404错误;
 

为解决这一问题,vue-router提供的方法是:

在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。 

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果你使用 Node.js 服务器,你可以用服务端路由匹配到来的 URL,并在没有匹配到路由的时候返回 404,以实现回退。

 

 

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火兰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值