Javascript Vue $route 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41860578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue $route is not defined
提问by Bogdan Dubyk
I'm learning Vue router. And I want to made programmatic navigation (without <router-link>).
My router and view:
我正在学习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' })
}
})
So by default I push to 'allVideos' route and inside that component I have a button and method for redirecting to ''editVideo' button:
因此，默认情况下，我推送到“allVideos”路由，在该组件内，我有一个按钮和方法用于重定向到“editVideo”按钮：
<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>
method:
方法：
editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},
It works fine. But when I try to get id inside a VideoEdit component using $route.params.idI got error Uncaught ReferenceError: $route is not defined
它工作正常。但是，当我尝试使用 VideoEdit 组件获取 id 时，$route.params.id出现错误Uncaught ReferenceError: $route is not defined
Maybe it's because I'm not using npm for now just a cdn version of Vue and Vuerouter. Any solutions? Thanks!
也许是因为我现在没有使用 npm，只是 Vue 和 Vuerouter 的 CDN 版本。任何解决方案？谢谢！
Updated:btw in Vue dev tool I see $route instance inside the component
更新：顺便说一句，在 Vue 开发工具中我看到组件内的 $route 实例
Updated:
更新：
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);
},
})
回答by Bogdan Dubyk
Thanks to Sandeep Rajoria
we found solution, need to use this.$routeexcept $routeinside a component
我们找到了解决方案，需要在组件内部使用this.$route之外$route
回答by Kishan Vaghela
For those who getting the error after adding this
对于那些在添加后收到错误的人 this
TypeError: Cannot read property '$route' of undefined
TypeError: Cannot read property '$route' of undefined
We need to use a regular functioninstead of ES6 arrow functions
我们需要使用常规函数而不是ES6 箭头函数
data: function() {
return {
usertype: this.$route.params.type
};
},
This worked for me.
这对我有用。
回答by Tran Hoang Hiep
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' });
}
})
回答by Janne
If you're using vue v2 & vue-router v2 then in vue-cli generated boilerplate way to access router e.g. from component is to import router (exported in router/index.js)
如果您使用的是 vue v2 和 vue-router v2，那么在 vue-cli 生成的样板方式中访问路由器，例如从组件是导入路由器（在路由器/index.js 中导出）
<script>
import Router from '../router';
then in your code you can use router functions like:
然后在您的代码中，您可以使用路由器功能，例如：
Router.push('/contacts'); // go to contacts page
回答by Seth McClaine
For those attempting to use es6 arrow functions, another alternative to @Kishan Vaghela is:
对于那些尝试使用 es6 箭头函数的人，@Kishan Vaghela 的另一种替代方法是：
methods: {
gotoRegister() {
this.$router.push('register')
}
}
as explained in the first answer of Methods in ES6 objects: using arrow functions
回答by Houndjetode Noukpo Herve
In my case these previous solutions don't work for me so i did the following
在我的情况下，这些以前的解决方案对我不起作用所以我做了以下
<script>
import Router from '../router';
<script>
import Router from '../router';
then in your code you can use this one
然后在你的代码中你可以使用这个
this.$router.push('/contacts');
this.$router.push('/contacts');
