VueJS router.push() 问题答案

【问题标题】：VueJS router.push() issueVueJS router.push() 问题
【发布时间】：2018-09-04 01:48:54
【问题描述】：

我在这里直奔主题。我正在登录页面上进行身份验证，单击登录页面后，它会将我重定向到产品的组件，在该产品的组件上，我执行HTTP request 以获取所有产品。但是，在产品页面上登录并重定向后，产品的组件似乎无法在 created() 生命周期挂钩上运行我的 HTTP request。这是正常行为吗？

这是我的代码：

登录：

export default{
        data(){
            return {
                email: '',
                password: ''
            }
        },
        methods:{
            login(){
                var data = {
                    client_id: 2,
                    client_secret: 'TOKEN_HERE,
                    grant_type: 'password',
                    username: this.email,
                    password: this.password
                }

                this.$http.post("oauth/token", data).then(response => {
                    this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now())
                    this.$router.push('/products')
                })

            }
        }

PRODUCTS.VUE

   import Products from './product/Products.vue'
    export default {
        components: {
            'my-products' : Products
        },
        created(){
          this.$http.get('api/products')
            .then(response => {
                alert("products from feed");
                this.products = response.body
            })
        }
    }

重定向到products.vue创建生命周期钩子后，它无法运行我的http请求。

提前致谢。

【问题讨论】：

什么意思无法运行？怎么了？ created 钩子没有触发？
@acdcjunior 当我成功登录时，我将使用 this.$router.push('/products') 重定向到 products component.. 重定向后 created() lifecyclye 钩子不能运行我的http request.. 它在我的控制台上给了我错误uncaught (in promise)
那就抓起来看看：this.$http.get('api/products') .then(response => { alert("products from feed"); this.products = response.body }, err => console.log('error is:', err));能把错误贴在这里吗？
@acdcjunior 会做的......给我一秒钟。
@acdcjunior 您好，先生，错误消息说我是Unauthenticated.. 但是我 100% 确定我已通过身份验证...当我刷新页面时，它会显示所有产品...但是， this.$router.push 之后页面的初始加载给了我未经授权的错误

标签： vue.js vue-router

【解决方案1】：

我好像你需要 mounted 挂钩。

https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

【讨论】：