Question

我正在学习Vue路由器。我想进行编程导航（没有<router-link>）。我的路由器和视图：

 router = new VueRouter({
        routes: [
            {path : '/videos',  name: 'allVideos', component: Videos },
            {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
        ]
    });

    new Vue({
        el: "#app",
        router,
        created: function(){
            if(!localStorage.hasOwnProperty('auth_token')) {
                window.location.replace('/account/login');
            }

            router.push({ name: 'allVideos' })
        }
    })

所以默认情况下我推送到所有视频＆＃39;路线和该组件内部我有一个按钮和方法，用于重定向到＆＃39; editVideo＆＃39; 按钮：

<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>

方法：

 editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},

工作正常。但是当我尝试使用$route.params.id在VideoEdit组件中获取id时出现错误未捕获的ReferenceError：$ route未定义

也许是因为我现在不使用npm只是Vue和Vuerouter的cdn版本。有解决方案吗谢谢！

更新： btw在Vue开发工具中我看到组件中的$ route实例

已更新：

    var VideoEdit = Vue.component('VideoEdit', {
          template: ` <div class="panel-heading">
                        <h3 class="panel-title">Edit {{vieo.name}}</h3>
                    </div>`,
                data() {
                    return {
                        error: '',
                        video: {},
                }
            },        
            created: function () {
                  console.log($route.params.id);
            },
        })

Answer 1

感谢Sandeep Rajoria

我们找到了解决方案，需要在组件

中使用除this.$route之外的$route

Answer 2

import Vue from 'vue'
import Router from 'vue-router';

Vue.use(Router)

const router = new VueRouter({
    routes: [
        {path : '/videos',  name: 'allVideos', component: Videos },
        {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
    ]
});

new Vue({
    el: "#app",
    router,
    created: function(){
        if(!localStorage.hasOwnProperty('auth_token')) {
            window.location.replace('/account/login');
        }

        this.$router.push({ name: 'allVideos' });
    }
})

Answer 3

如果你正在使用vue v2＆amp; vue-router v2然后在vue-cli生成的样板方式访问路由器，例如from component是导入路由器（在router / index.js中导出）

<script>
  import Router from '../router';

然后在您的代码中，您可以使用路由器功能，如：

Router.push('/contacts'); // go to contacts page

Answer 4

就我而言，这些先前的解决方案对我不起作用，因此我做了以下

<script> import Router from '../router';

然后在您的代码中可以使用此代码

this.$router.push('/contacts');

Answer 5

对于那些在添加this之后出现错误的人

TypeError: Cannot read property '$route' of undefined

我们需要使用常规功能而不是 ES6箭头功能

data: function() {
    return {
      usertype: this.$route.params.type
    };
  },

这对我有用。

Answer 6

对于那些尝试使用es6箭头功能的人，@ Kishan Vaghela的另一种替代方法是：

methods: {
        gotoRegister() {
            this.$router.push('register')
        }
    }

如Methods in ES6 objects: using arrow functions的第一个答案

所述

Vue $ route未定义

6 个答案: