Vue router need page reload and dont see this.$router

1
votes

When you go through the route via router-link, it first opens the App.vue page, but the url changes immediately and you need to reload the page so that it appears. And if you programmatically follow the route, you see the error 'Cannot read property' $ router 'of undefined'.

I`m setting up routes and component by Vue docs, but its not help.

routes.js

import Home from './views/Home.vue'
import Auth from './views/Auth.vue'
import Test1 from './views/Test1.vue'

export const routes =  [
{
  path: '/',
  name: 'home',
  component: Home
},
{
  path: '/auth',
  name: 'auth',
  component: Auth
},
{
  path: '/test1',
  name:'test1',
  component: Test1
}
]

App.vue

<template id="app">
  <v-ons-page>
    <Navbar titleb="lol"/>
    <router-view/>
  </v-ons-page>
</template>

<script>
import Navbar from './components/Navbar'

export default{
 name: 'app',
 data () {
 return {
  navTitle: ''
 }
  },
 components: {
  Navbar
  }
 }


 Auth.vue

 <template id="Auth">
 <div>

 <auth-c class="auth"/>
 <button v-on:click="gototest()">Test1</button>
 </div>
 </template>

 <script>
 import AuthC from '@/components/AuthC'

 export default {
 name: 'auth',
 methods:{
 gototest:()=>{
  this.$router.push({path:'/test1'})

 }
 },
 components: {
  AuthC
  }
 }


main.js

import 'onsenui/css/onsenui.css'
import 'onsenui/css/onsen-css-components.css'

import Vue from 'vue'
import App from './App.vue'
import { routes } from './router'
import Router from 'vue-router'
import store from './store'
import VueOnsen from 'vue-onsenui'
import axios from 'axios'
import './registerServiceWorker'

Vue.config.productionTip = false

Vue.use(VueOnsen)
Vue.use(Router)
let router = new Router({mode : 'history', routes})

new Vue({
 router,
 store,
 axios,
 render: h => h(App),
 beforeCreate () {
   this.$ons.disableAutoStyling() // Or any other method
  }
   }).$mount('#app')
1
javascriptvue.jsvue-router

1 Answers

1
votes

It's solved, when I change router-view like this code:

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>