php - Laravel - Vue.js 路由无法正常工作
问题描述
我对 vue.js 还是很陌生,而且我正在使用 laravel 8 和 php 7.24 我想要做的是无需重新加载即可访问页面。我已经设置了 vue.js,并且我有两个 vue 组件,我需要将它们路由到另一个。问题是我可以看到 home.vue 文件的成分,但路由器链接元素不起作用。
app.js 文件
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
const app = new Vue ({
el: '#app',
router: new VueRouter(routes)
});
route.js 文件
import home from './components/home.vue';
import example from './components/example.vue';
export default{
mode: 'history',
linkActiveClass: 'font-semibold',
routes: [
{
path: '/vue',
component: home
},
{
path: '/vue/example',
component: example
}
]
}
主页.vue 文件
<template>
<router-link to="/vue/example"><a>url to example</a></router-link>
</template>
<script>
export default {
name : "home"
}
</script>
例子.vue 文件
<template>
<router-link to="/vue"><a>Back to the root</a></router-link>
</template>
<script>
export default {
name : "example"
}
</script>
这是我定义路线的方式(没有它们页面不起作用)
Route::get('/vue/{any}', function (){
return view('vue.index');
})->where('any', '.*'); ------> // this function doesn't work.
Route::view('/vue', 'vue.index');
最后是我的索引刀片,我在这里看不到我的组件,你们看错了吗?
<div id="app"></div>
<h1>This is a vue component</h1>
<router-link to="/vue/example" exact><div class="button">please send me to another page</div></router-link>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/routes.js')}}"></script>
<script src="{{asset('components/example.vue')}}"></script>
<script src="{{asset('components/home.vue')}}"></script>
解决方案
推荐阅读
- xml - SSRS rsInvalidDataSourceCredentialSetting XML + SQL 数据源
- c++ - qt treewidget 小部件项目 QCheckBox 对齐
- input - 在 z/OS Assembler 中,我可以读取 JCL 输入流两次吗?
- laravel - 将 props 对象传递给 Vue 组件,同时保持属性的反应性
- javascript - 我需要递归检查 Javascript 中的动态树结构
- python - 嵌套 json 对象的相似性
- php - 是否可以从不同的类或文件加载 Swagger 注释?
- bash - 仅在用户在计算机上登录一次后运行 bash 脚本,然后允许在每次登录尝试时运行脚本
- linux - KSH 中的动态环境变量
- c - 微软生成SSL证书的实现