Представленные вами примеры кода немного сбивают с толку, вы просто должны передать представление imported прямо в свойство component записи router.
Где вы сделали:
const AboutUs = {template: '<div>about_us</div>'};
Замените эту строку на:
import AboutUs from './components/AboutUs.vue'
Я не могу понять из вашей выборки, когда и какова актуальность components: {"about-us": AboutUs }, это не нужно.
Вот пример моей настройки:
маршрутизатор. js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'index',
component: () => import('../components/views/welcome')
},
{
path: '/about-us',
name: 'about-us',
component: () => import('../components/views/about-us')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
main. js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Приложение. vue
<template>
<v-app v-cloak>
<router-link :to="{ name: 'index' }">Welcome</router-link>
<router-link :to="{ name: 'about-us' }">About Us</router-link>
<router-view></router-view>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
компонентов / просмотров / о нас. vue
<template>
<div>This is the About Us page!</div>
</template>
<script>
export default {
name: 'about-us'
}
</script>
В этом примере используется Режим истории
Другие примечания
При маршрутизации mounted ненадежен, вместо этого вы должны помещать любые логи извлечения c в собственные method при вызове любого:
methods: {
fetch () {
// https://github.com/axios/axios
axios.get('https://ghibliapi.herokuapp.com/films').then( ... )
}
}
Вызовите метод this.fetch в обоих beforeRouteUpdate и beforeRouteEnter вместо mounted, вы даже не можете полагаться на created, когда дело доходит до представлений, обрабатываемых vue-router.
Ax ios предлагается вместо собственного fetch , потому что ax ios обеспечивает больше функциональности, возможностей и совместимости с браузером.
В about-us. vue Вы добавляете эти Навигационные гвардии примерно так:
<template>
<div>This is the About Us page!</div>
</template>
<script>
export default {
name: 'about-us'
methods: {
fetch () {
axios.get('https://ghibliapi.herokuapp.com/films').then( ... )
}
}
// Will fire if you are already on the view but a parameter changes (dynamic routing)
beforeRouteUpdate(to, from, next) {
this.fetch()
next()
},
// Will fire when you enter the view
beforeRouteEnter(to, from, next) {
this.fetch()
next()
},
}
</script>
Оба должны быть добавлены, понимайте, что они не будут стрелять в в то же время только один из них при необходимости выполнит fetch один раз.
Это разрешит все проблемы, с которыми вы могли бы столкнуться при Dynami c Маршрутизация , если вы когда-либо используйте их.
Структура папок
src/
+ App.vue
+ main.js
+ router.js
+ vue.config.js
+ assets/
+ logo.png
+ components/
+ views/
+ welcome.vue
+ about-us.vue
Надеюсь, это прояснит для вас требования к настройке.