Vue-router not loading URL typed into browser

Question

I have a Laravel 5.3 project utilizing Vue-router. I am using the <router-view></router-view> tags in a template (home.blade.php).

The only problem I am running into is that I can't seem to get the views by typing the URL into the router. It only works if I use router-link in my blade files.

Here is my main JS file where I implement the router:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);
Vue.use(require('vue-resource'));

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const routes = [
  { path: '/view1', component: require('./components/view1.vue')},
  { path: '/view2', component: require('./components/view2.vue')},
  { path: '/view3', component: require('./components/view3.vue')}
]

const router = new VueRouter({
  routes: routes,
})

const app = new Vue({
  router
}).$mount('#app')

My web.php file:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//All the authentication routes
Auth::routes();

//Only routing needed for Laravel
Route::get('/{catchall?}', ['as' => 'start', 'middleware' => 'auth', function() {
    return view('home');
}])->where('catchall', '.*');

Any idea why it may be doing this?

Matthias Weiß · Accepted Answer · 2017-01-10 20:34:03Z

3

Have you tried setting history: true inside the new VueRouter, you don't need to use hash-URLs if you have a backend.

answered Jan 10, 2017 at 20:34

Matthias Weiß

5081 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

boisterouslobster Over a year ago

That seems to work, but only if I do it like this: #/url-here

Belmin Bedak Over a year ago

There is method to remove hash, but you will need to make some changes on your server config router.vuejs.org/en/essentials/history-mode.html

Reinhard Over a year ago

I found a good configuration for IIS: (web.config) gist.github.com/mkelley82/19d2e0464e5375b19c4cb1f39e9624ef

Collectives™ on Stack Overflow

Vue-router not loading URL typed into browser

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related