CODEWITHSUNDEEP
javascriptvue.jsvue-router
Liga
Liga

Reputation: 3439

Vue.js route does not match even though it is defined

I am trying to create a Vue SPA app. But the route does not seem to match what I have defined in my router. I can't understand why this is happening. As far as I see everything should be working. What am I missing here?

My index.html

<html>
    <head>
        <title>New Vue.js Project</title>
        <script src="assets/js/vue.js"></script>
        <script src="assets/js/vue-router.js"></script>
    </head>

    <body>
        <div id="app">
            {{ 'Route: ' + JSON.stringify($route) }}

            <v-app>
                <router-view></router-view>
            </v-app>
        </div>

        <script type="module" src="app.js"></script>
    </body>
</html>

My app.js

import routes from './routes.js'

new Vue({
  el: '#app',
  router: routes,
  data: {
    msg: 'Hello World!',
  },
})

My routes.js

import Index from './views/Index.js'

Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            name: 'index',
            path: '/',
            component: Index,
        },
    ],
})

When I navigate to http://localhost/new-vue-project/ and print {{ $route }} I get this:

{
   "name":null,
   "path":"/new-vue-project/",
   "fullPath":"/new-vue-project/",
   "matched": [

   ]
}

I also tried to add base property to my router but I got the same results.

base: 'http://localhost/new-vue-project/',

Upvotes: 0

Views: 4099

Answers (1)

Evgeny Melnikov
Evgeny Melnikov

Reputation: 1092

I think you need to use relative path without domain name (localhost), according to the documentation, like this:

base: '/new-vue-project/'

Also it's possible to configure public path at vue.config.js file globally:

module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? '/new-vue-project/' : (process.env.VUE_APP_MY_APP_BASE_PATH || '/')
}

Upvotes: 1

Related Questions