When navigating through router-link, the App.vue page opens initially, but the URL changes immediately without displaying the content. Reloading the page is necessary to view it. If you navigate programmatically, you may encounter an error stating 'Cannot read property' $ router 'of undefined'.
I've followed Vue docs for setting up routes and components, but I'm still facing issues.
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')