How can I redirect using vue-router?

Question

I have tried to access to others pages via url, but those pages never loads

This is my main.js file

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'

Vue.config.productionTip = false

Vue.use(VueRouter)

import Index from './views/Index';
const About = { template: '<p>about page</p>' }

const routes = [
  { path: '/index', name: 'index', component: Index },
  { path: '/about', name: 'about', component: About }
]

var router = new VueRouter({
  routes: routes,
  mode: 'history'
})

new Vue({
  router: router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Does anyone can help me with vue-router? i am new in this framework

arkuuu arkuuu · Accepted Answer · 2020-02-19T07:28:37

Does it work if you access them like this:

http://localhost:8080/#/about

If yes, your vue-router is working in the default hash-mode. To get rid of the hash and get "normal" URLs you'll need to set it to history mode.

Edit:

As I see you're already using history mode. Do you use Vue CLI for local development? This should normally work out of the box. If not, you need to setup some redirect rules on other web servers. Please see the examples here: Example Server Configurations

Edit 2: Can you show your App component? I tried to reproduce your problem in a sandbox, but it works: https://codesandbox.io/s/confident-voice-zyg07

The App component here looks like this, including the router-view:

<template>
  <div id="app">
    <router-view id="page"/>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {}
};
</script>

How can I redirect using vue-router?

1 Answers