Код, приведенный в этой статье, можно скопировать и использовать напрямую.
На домашней странице создайте страницу tab1.vue в папке компонента.
<шаблон>
<div class="tabs">
<router-link class="tab-item" tag="div" to="/Page1">page1</router-link>
<router-link class="tab-item" tag="div" to="/Page2">page2</router-link>
<router-link class="tab-item" tag="div" to="/Page3">page3</router-link>
</div>
</шаблон>
<скрипт>
экспорт по умолчанию {};
</скрипт>
<style lang="меньше">
.tabs {
дисплей: гибкий;
высота: 60 пикселей;
ширина: 100%;
цвет фона: #e5e5e5;
курсор: указатель;
дел {
поле справа: 20 пикселей;
}
}
</стиль>
Создайте файл tabs1 в файле представления, чтобы создать три страницы vue, а именно page1.vue, page2.vue и page3.vue.
//Содержимое может быть любым
<шаблон>
<див класс="">
Страница 1
Это панель вкладок, переключаемая маршрутизацией
</div>
</шаблон>
<скрипт>
экспортировать по умолчанию {
имя: '',
компоненты: {
}
}
</скрипт>
Добавьте эти три маршрута в файл маршрутизатора.
импортировать просмотр из «представления»
импортировать VueRouter из «vue-router»
импортировать страницу 1 из «../views/Tabs1/Page1.vue»
// импортируем страницу 1 из '../views/Tab2/Page.vue'
Vue.use(VueRouter)
константные маршруты = [
{
путь: '/Страница1',
имя: «Страница1»,
компонент: Страница 1
},
{
путь:'/страница2',
компонент: () => import('@/views/Tabs1/Page2')
},
{
путь: '/страница3',
компонент: () => import('@/views/Tabs1/Page3')
}
]
const router = новый VueRouter({
режим: «история»,
база: процесс.env.BASE_URL,
маршруты
})
экспортировать маршрутизатор по умолчанию
Наконец, добавьте файл tab1 в app.vue.
<шаблон>
<дел>
<Tab></Tab>
<router-view></router-view>
</div>
</шаблон>
<скрипт>
//вкладка переключения маршрутизации
импортировать вкладку из «./comComponents/tab1.vue»
// импортируем вкладку из './comComponents/tab2.vue'
экспортировать по умолчанию {
данные() {
возвращаться {
}
},
компоненты:{
Вкладка
}
}
</скрипт>
<style lang="меньше">
</стиль>