带有参数的 vue-router 路由在页面重新加载时不起作用 [英] vue-router route with params not working on page reload
问题描述
我在我的项目中使用了 vue-router.
我能够完美地导航到我的命名路线.我唯一的问题是当我使用需要参数的命名路由时，刷新页面时它不会加载.
这是我的路线:
'/example/:username': {名称:'示例配置文件'，title: '示例配置文件',组件:示例组件}这就是我使用 vue-router route 的方式:
当我选择 Example Link 时，我得到 mydomain.com/example/raaaaf.
在第一次加载时，它呈现正确的模板，但是当我刷新或在地址栏上手动输入链接时，我被重定向到我的 Page Not Found 页面和页面时调用的方法被创建不会被触发.
这是我的ExampleComponent:
<div class="small-12 left"><侧栏></侧栏><div class="store-right"><商店详情></商店详情><store-menu></store-menu><store-listings></store-listings></模板><脚本>导出默认{数据() {返回 {用户名:空，用户:空，}},创建(){this.getUser()},方法: {获取用户(){console.log(this.$route.params);}}}
您需要正确配置您的服务器.您的服务器正在/example/raaaaf 目录中寻找索引文件.我仔细阅读了这个页面:http://router.vuejs.org/en/essentials/history-mode.html
I am using vue-router on my project.
I am able to navigate to my named routes perfectly fine. My only problem is when I use a named route which expects a parameter, it does not load when I refresh the page.
here is my route:
'/example/:username': {
name: 'example-profile',
title: 'Example Profile',
component: ExampleComponent
}
this is how I am using the vue-router route:
<a v-link="{ name: 'example-profile', params: { username: raaaaf } }">
Example Link
</a>
When I select Example Link I get mydomain.com/example/raaaaf.
On first load, it renders the correct template, but when I refresh or manually entered the link on the address bar, I am redirected to my Page Not Found page and the method called when the page is created is not triggered.
This is what I have on my ExampleComponent:
<template>
<div class="small-12 left">
<side-bar></side-bar>
<div class="store-right">
<store-details></store-details>
<store-menu></store-menu>
<store-listings></store-listings>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: null,
user: null,
}
},
created() {
this.getUser()
},
methods: {
getUser() {
console.log(this.$route.params);
}
}
}
</script>
You need to configure your server properly. Your server is essetially looking for an index file in a /example/raaaaf directory. I'd read through this page carefully: http://router.vuejs.org/en/essentials/history-mode.html
这篇关于带有参数的 vue-router 路由在页面重新加载时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
