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

router.vuejs.org/guide/essentials/history-mode.html

str
– str

2020-02-19 07:38:20 +00:00
Commented Feb 19, 2020 at 7:38 — str
– str, Commented Feb 19, 2020 at 7:38

arkuuu · Accepted Answer · 2020-02-19 11:25:36Z

1

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>

edited Feb 19, 2020 at 11:25

answered Feb 19, 2020 at 7:28

arkuuu

6487 silver badges24 bronze badges

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

1 Comment

arkuuu Over a year ago

Please see my edit. Seems like you're already using history mode. Maybe you are missing the redirect rules for your local web server if you're not using Vue CLI?

Collectives™ on Stack Overflow

How can I redirect using vue-router?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related