CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-router
Travis Bear
Travis Bear

Reputation: 13859

vue-router: browser attempts to open <router-link> as a local file

I'm new to Vue-router and can't figure out what's gone awry. Clicking on a navigation link causes the desired component to be displayed for an instant, but then the browser tries to open the component as if it were a file.

For example, clicking on the "Badger!" link results in the browser attempting to open a local file named file:///home/travis/.../prototype/dist/badger which of course results in a file not found error.

Any insights on this? I've tried to follow existing examples carefully.

main.js:

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Badger from './component/Badger.vue';
import Grid from './component/Grid.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/badger', component: Badger },
    { path: '/grid', component: Grid },
  ]
});

new Vue({
  el: '#app',
  router,
  render: h => h(App),
});

App.vue

<template>
    <div id="app">
        <ul>
            <li>
                <router-link to="/badger">Badger!</router-link>
            </li>
            <li>
                <router-link to="/grid">Data!</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('mounted App component')
        },
        data() {
            // ...
            }
        },
    }
</script>

<style>
    // ...
</style>

Upvotes: 1

Views: 1277

Answers (1)

Travis Bear
Travis Bear

Reputation: 13859

When the router is in history mode, the build artifacts must be delivered to the browser from an http server, as @bigless mentioned.

If your workflow requires opening the build artifact from the local filesystem, that can be done if you remove these lines from the router declaration:

  mode: 'history',
  base: __dirname,

This will put you in "hash mode" (the default state). Your artifact can then be loaded either from an http server or from the local filesystem.

Relevant docs: https://router.vuejs.org/guide/essentials/history-mode.html

Upvotes: 3

Related Questions