Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I don't know what's wrong with my code or it issues on laravel 8?
router JS File
import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstPage from './components/pages/FirstPage.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/new-route', component: FirstPage }
]
export default new VueRouter({
mode: 'history',
routes
})
app JS File
require('./bootstrap');
window.Vue = require('vue')
import router from './router'
Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue ({
el: '#app',
router
})
web PHP File
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TestController;
Route::get('/', function () {
return view('welcome');
});
Route::get('test', [TestController::class, 'test']);
Route::any('{slug}', function(){
return view ('error');
});
does any have an idea? or any suggestions. (It requires more details to be posted)
you need to use this in web.php
Route::any('{all}', [TestController::class, 'test'])
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
or
Route::any('{all}',function(){
return view('main'); // it should be main blade file
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
to work vue router without #
this code exclude api and storage url so both will work and other all route catch so vuejs do its magic
Related
I'm using vue js with laravel api . i have defined router for forget password page in url i'm passing token . when i'm passing token then page not loading its coming not found.
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Router from 'vue-router'
import ResetPasswordForm from './pages/ResetPasswordForm'
Vue.use(Router)
const routes = [{
path: 'reset-password/:token',
name: 'ResetPasswordForm',
component: ResetPasswordForm
}]
export default new Router({
mode: 'history',
routes
})
web.php
Route::any('{slug}', function () {
return view('welcome');
});
please help me how to fixed out this issue.
I need help about Axios.
I develop a SPA webapp on Laravel 6 (with package SPARK) and VueJS (version 2).
On a Vue component, I want to retrieve datas from my bdd.
So, I use Axios to make a get request on an API uri.
But, when I call Axios request, data field in Response object is a HTML code.
This is my code :
routes/web.php
Route::get('/', function(){
return view('welcome');
});
Route::middleware('auth')->get('/{any?}', function (){
return view('documents');
})->where('any', '[\/\w\.-]*');
The "welcome" view is a blade page where redirect on "/login" if user is not authenticate.
Otherwise, it redirect on "/home".
The link "/home" is define on vue-router in app.js.
The other route is the unique way to display the webapp (it's a single page application).
The Vue instanciation is in "passeport" view.
resources/js/app.js
import 'es6-promise/auto'
require('spark-bootstrap');
require('./components/bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
Vue.component('index', require('./components/pages/index').default);
import Dashboard from './components/pages/dashboard.vue';
...
const routes = [
{
name: 'dashboard',
path: '/home',
component: Dashboard,
},
{...}
]
const router = new VueRouter({
history: true,
mode: 'history',
routes: routes
});
var app = new Vue({
mixins: [require('spark')],
router,
});
router package is added in Vue instanciation.
it is in the same context than spark component (identify by the #spark-app element)
resources/views/documents.blade.php
#extends('spark::layouts.app')
#section('content')
<div id="app">
<index :user="user"></index>
</div>
#endsection
It is the view returned for any path.
In the spark::layout.app, there is only a div with id="spark-app" and the #yield('content').
resouces/js/components/pages/index.vue
<template>
<transition name="fade">
<Component :is="layout" :user="user">
<router-view :layout.sync="layout" :user="user"></router-view>
</Component>
</transition>
</template>
.
.
<script>
const default_layout = "default";
export default{
props: ['user'],
data(){
return{
layout: 'div',
}
},
}
</script>
It's just the vue component with the router-view configure with a layout.
resources/js/components/pages/dashboard.vue
<template>
...
</template>
<script>
import Default from './../layouts/Default.vue'
export default {
props: ['user'],
data: function () {
return {
documents: []
}
},
created() {
this.$emit('update:layout', Default);
},
mounted(){
// extract passeports's informations
this.axios.get('/api/documentslist').then(response => {
console.log(response);
this.documents= response.data.data;
});
}
}
</script>
Here, I call the documentslist API define in routes/api.php.
routes/api.php
Route::middleware('auth:api')->group(function () {
Route::get('/user', function (Request $request) {
return $request->user();
});
Route::get('/documentslist', 'DocumentController#list');
});
app/http/Controllers/DocumentController.php
...
public function list(Request $request){
return DocumentCollection(Document::all());
}
...
When I go to "/home", I verified "documents" data in Vue (or in the javascript console log), and response.data = "\r\n\r\n\r\n (...) v-if=\"notification.creator\" :src=\"notification.creator.photo_url\" class=... (10024 total length)"
But, list method in DocumentController have to return a list of documents, and not a HTML code.
Furthermore, I use Passport Laravel to unified authentication by login and the API token.
And the Axios request work in the same project without SPA structure.
I hope I'm clear in the problem explanation, and that I forget any detail to understand.
Thanks.
You can simply return like this from your controller
return response()->json(Document::all());
I suspect the API link to redirect with the SPA route (in routes/web.php, any path return the "home" view).
I try to change route in routes/web.php.
instead of :
Route::middleware('auth')->get('/{any?}', function (){
return view('home');
})->where('any', '[\/\w\.-]*');
I put this :
Route::middleware('auth')->get('/home', function (){
return view('home');
});
Like this, this route doesn't take account of all path.
And...it works !
But...it isn't what I want :(
Indeed, without the route with '/{any?}' the SPA doesn't work.
I don't understand why this method works another project in Laravel (without Spark package), and doesn't work with this project.
I don't know about laravel but this problem arises when the route you are calling is not the correct one. Do some efforts and check what route the application in eventually calling also take a look at your proxy settings.
****I am NodeJs developer not Laravel
Am using Vuex in my Laravel app and for some reason, I cannot do route.push inside an action.
My app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import { routes } from './routes'
import store from './store/store'
Vue.use(VueRouter)
Vue.component('app-component', require('./App.vue').default);
Vue.component('appRegister', require('./components/User/Register.vue').default);
Vue.component('appLogin', require('./components/User/Login.vue').default);
const router = new VueRouter({
mode: 'history',
routes
})
const app = new Vue({
el: '#app',
router,
store
});
Inside my Login controller, I have a method called login which looks like the following:
login(){
this.$store.dispatch('login', this.user);
}
Then my login action looks like this:
login: ({commit}, user) => {
state.users.map(u => {
if(u.email == user.email){
router.push('/');
}
});
}
When I click on the button, I see the following error in the console:
[Vue warn]: Error in v-on handler: "ReferenceError: router is not defined"
Note, if I do the following inside the Component method, it works fine:
login(){
this.$router.push('/');
}
How can I do the route push inside the vuex action?
I looked at this answer here but it does not seem to solve my problem.
I imported vue-router inside app.js
You have to define your vue router in your login controller or import your router into your login controller.
When reloading my single page application, I would like the url to load correctly instead of throwing a 404 error. Using Laravel 5.6, Vue.js 2.6, & MAMP.
I have tried the following code, however, I am loading different app.js files in the same welcome view based on what the URL is. Because of this structure,, this solution is not working:
Route::get('/{vue_capture?}', function () {
return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/web.php file based on the url']);
})->where('vue_capture', '[\/\w\.-]*');
I would like to have refresh work with my vue router. Any suggestions, either having to do with my routes/web.php file or .htaccess file is appreciated.
Note: This .htaccess file configuration was not working for me (apache):
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
//welcome blade
<div id="app">
<app></app>
</div>
<script src="{{ asset($app_path) }}"></script>
//app.vue
<div class="container-fluid px-0">
<router-view/>
</div>
Well, as far I can see, your approach was good. You are capturing all GET requests, and passing them to your Blade view.
My suggestion:
Cleaner route:
Route::get('/{any}', 'YourController#index')->where('any', '.*');
Your app.js (main JS file should look something like this):
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import About from './views/About'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
With all this configuration and your router-view, you should be fine.
I try to get parameters from url
let's say url contains:
localhost:8000/blog?q=hello
I want to grab hello to trigger function call
What I had declare in app.js in laravel webpack:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: []
})
const app = new Vue({
router
});
export default app;
In blog page, I try to extract the parameter from url
new Vue ({
el: "#blog-content",
},
mounted: function() {
q = this.$route.query.q
console.log(q)
}
)
I npm run dev to compile and run the blog page it show error:
TypeError: Cannot read property 'query' of undefined
what is wrong? I am sure that Vue Router is properly installed in the application.
I think that the blog page that you use is not correct.
You recreate another Vue instance and in that case that new instance doesn't have a router passed to it. So I think that's why this.$router is undefined.
Also you don't pass the view Component to your router so it doesn't know what to look for with the specific url.
Here's your app.js file corrected
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Blog from './views/Blog';
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/blog',
name: 'blog',
component: Blog
},
]
});
The blog view page template : views/Blog.vue
<template>
<div class="wrapper">
My blog page
</div>
</template>
<script>
export default {
data() {
return {
myvariable : ''
}
},
mounted() {
let q = this.$route.query.q;
console.log(q);
},
};
</script>
Now it should works correctly :)
Edit : Also you don't need to export the app variable in your app.js
Remove the following line export default app; at the end of the file