Question

当您通过router-link进行路由时，它将首先打开App.vue页面，但是url立即更改，您需要重新加载页面以使其显示。而且，如果您以编程方式遵循该路线，则会看到错误“无法读取属性” $ router“未定义”。

我正在通过Vue文档设置路线和组件，但无济于事。

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')

Answer 1

当我像以下代码那样更改router-view时，此问题已解决：

{{1}}

Vue路由器需要重新加载页面，看不到这个。

1 个答案: