Routing Vue Js

Asked

Viewed 281 times

0

I am creating more than one route in Vue js, however, for any given route is redirected to Login.

js router.

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Cadastro from '@/components/Cadastro'

Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',
  name: 'Login',
  component: Login
},
{
  path: '/cadastro',
  name: 'Cadastro',
  component: Cadastro
}


]
})

main.js 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

The registration route, for example, opens Login.

twitter-bootstrap web-application vue.js vuetify

  • I believe this to be the Routes.js and how is the main.js?

  • I updated with main.js, now.

  • Enter the class name of router for Router in the archive main.js and in it also Vuerouter and declare it so Vue.use(VueRouter);

1 answer

2

You must take Vue.use(Router) of the router.js file and use it in the main.js file before the new Vue. I also wouldn’t use the new Router in router.js.
I would leave like this:
Router.js

import Login from '@/components/Login'
import Cadastro from '@/components/Cadastro'

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/cadastro',
    name: 'Cadastro',
    component: Cadastro
  }
]

export default routes


main.js

import Vue from 'vue'
import App from './App'
import routes from './router'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter)

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Browser other questions tagged twitter-bootstrap web-application vue.js vuetify

You are not signed in. Login or sign up in order to post.