javascript - Vue.js 在页面刷新时返回 JSON
问题描述
我是 vue.js 的新手,我已经很喜欢它了,除了我有一个我不喜欢的丑陋部分,那就是“当我点击刷新时页面返回 JSON”
但是,如果我浏览母版页,即主页,它会按预期正确加载,但如果我单击刷新,我会收到 JSON 响应。
我在我的后端使用 laravel,在我的控制器中,我返回一个 JSON 响应(是的,我知道),但是,我有点期待 vue.js 为我自动检测链接并像我一样发挥它的魔力从母版页转到链接/页面。
这是控制器将项目返回到母版页的样子
public function index()
{
//
$task = TodoTask::orderBy('created_at', 'desc')->paginate(4);
return \request()->json(200, $task);
}
我对此做了很多研究,我从这个链接 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations中了解了我必须配置的内容我的 .htaccess 文件能够这样做。
这是我的 .htaccess 文件的样子
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
我可能做错了什么?
我的Vue路线
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
Vue.component('example-component', require('./components/ExampleComponent.vue'));
//Vue.component('tasks', require('./components/TodoTask.vue'));
const example = require('./components/ExampleComponent.vue');
const Samplelink = require('./components/SampleComponent.vue');
const task = require('./components/TodoTask.vue');
const routes = [{
path: '/example',
component: example
}, {
path: '/sample',
component: Samplelink
}, {
path: '/tasks',
component: task
}];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#app',
router
}).$mount('#app');
解决方案
推荐阅读
- jquery - 重新加载后带有特殊字符的jqGrid过滤器问题
- python - matplotlib 轴刻度标签在导出到 pgf 时上下移动
- c++ - int 类型数组的名称和 char 类型的数组名称有什么区别?(在 C++ 中)
- git - wsl: git pull 暂时认为有局部变化
- python - 希望使用多个嵌套块在 Python 中导出 JSON
- c# - 为什么在离开方法之前使用变量会自行处理?
- c# - SQL Azure 数据库 - 令人困惑的错误消息 - SQL Server
- python - 使用 css 使 Gtk 窗口透明
- reactjs - 使用 React 16/17 在 Web 上集成 3D 模型,这可能吗?
- ssl - 反向地理编码 - geopy.Nominatim 模块引发 urlopen 错误 [SSL: UNKNOWN PROTOCOL]