web-dev-qa-db-ja.com

Vue $ routeは定義されていません

私は学習しています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' })
        }
    })

したがって、デフォルトでは「allVideos」ルートにプッシュし、そのコンポーネント内に「editVideo」ボタンにリダイレクトするためのボタンとメソッドがあります：

<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を取得しようとすると、エラーが発生しましたncaught ReferenceError：$ route is not defined

たぶん、今のところnpmをVueとVuerouter。のcdnバージョンだけを使っているわけではありません。解決策はありますか？ありがとう！

更新： btw in Vue dev toolコンポーネント内に$ 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);
            },
        })
javascriptvue.jsvuejs2vue-componentvue-router
26
Bogdan Dubyk

Sandeep Rajoria に感謝

ソリューションを見つけました。コンポーネント内でthis.$routeを除く$routeを使用する必要があります

35
Bogdan Dubyk
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' });
    }
})
5
Tran Hoang Hiep

私の場合、これらの以前のソリューションは私のために機能しないので、私は次のことをしました

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

あなたのコードでこれを使用できます

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

1
Houndjetode Noukpo Herve

thisを追加した後にエラーが発生する場合

TypeError: Cannot read property '$route' of undefined

ES6矢印関数の代わりに通常関数を使用する必要があります

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

これは私のために働いた。

1
Kishan Vaghela

vue v2＆vue-router v2を使用している場合、コンポーネントからルーターにアクセスするためのvue-cli生成ボイラープレート方法では、ルーターをインポートします（router/index.jsにエクスポートされます）

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

コードでは、次のようなルーター機能を使用できます。

Router.Push('/contacts'); // go to contacts page
1
Janne