trying to fix routing issue

user_17231176 0
Viewed 29

I have code that when viewing it in a local server the routing works fine, but when after I push it to github it gets broken. It dosen't load the adjective page from the start and I can't click to the rhymesaurus page. any ideas?

app.vue

  <div id="app">
    <h1>Fun With Datamuse</h1>
    <router-link to="/">Adjective For Noun</router-link>
    <p></p>
    <router-link to="/rhymesaurus">Rhymesaurus</router-link>
  <router-view/>
  </div>
  
</template>

<script>
import Adjective from './views/Adjective.vue'
export default {
  components: { Adjective },
  name: 'app'
}
</script>

Router.js

import { createRouter, createWebHistory } from 'vue-router'


// Vue.use(Router)

const routes = [

  // { path: '/', redirect: '/adjective' },

  {
    path: '/',
    name: 'Adjective',
    component: () => import('./views/Adjective.vue')
  },
  {
    path: '/rhymesaurus',
    name: 'Rhymesaurus',
    component: () => import('./views/Rhymesaurus.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

link to page https://dougjones866.github.io/the-rhymesaurus/

vue.js router github
1 Answers

The issue is because you're expecting a path of the-rhymesaurus/ to match against /, hence why when you click the Adjective For Noun link it goes to /.

Vue Router has a base url parameter that lets you specify a base path.

You should be able to change your code to:

const router = createRouter({
    base: "/the-rhymesaurus",
    history: createWebHistory(process.env.BASE_URL),
    routes
})

Vue router documentation for base

user_36888640
Related