Vue $ route未定义 [英] Vue $route is not defined
问题描述
我正在学习Vue路由器。我想进行程序化导航(没有< router-link>
)。
我的路由器和视图:
I'm learning Vue router. And I want to made programmatic navigation (without <router-link>
).
My router and view:
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'
按钮:
So by default I push to 'allVideos' route and inside that component I have a button and method for redirecting to ''editVideo' button:
<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未定义
It works fine. But when I try to get id inside a VideoEdit component using $route.params.id
I got error Uncaught ReferenceError: $route is not defined
也许是因为我现在不使用npm只是Vue和Vuerouter的cdn版本。有解决方案吗谢谢!
Maybe it's because I'm not using npm for now just a cdn version of Vue and Vuerouter. Any solutions? Thanks!
更新: bt在Vue开发工具中我看到组件内的$ route实例
Updated: btw in Vue dev tool I see $route instance inside the component
更新:
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);
},
})
推荐答案
我们找到了解决方案,需要使用这个。$ route
exc ept $ route
在组件内
we found solution, need to use this.$route
except $route
inside a component
这篇关于Vue $ route未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!