Эта статья в основном относится к видеоуроку преподавателя технического жира.
Введение
Из-за отсутствия поддержки маршрутизации в Vue во время разработки был официально добавлен плагин vue-router, что очень важно в экологической среде Vue.В фактической разработке написана только одна страница для работы с vue-router. Чтобы изучить vue-router, вы должны сначала узнать, что такое маршрутизация? Маршрутизация здесь не относится к аппаратным маршрутизаторам, на которые мы обычно ссылаемся.Маршрутизация здесь — это диспетчер путей SPA (одностраничное приложение). С точки зрения непрофессионала, vue-router — это система управления путями ссылок нашего веб-приложения.
У некоторых друзей возникнут сомнения, почему мы не можем использовать его напрямую, как раньше<a></a>Теги какую ссылку писать? Поскольку мы используем Vue как одностраничное приложение, это эквивалент главной страницы index.html, поэтому вы пишете<a></a>Ярлыки не работают, для управления ими нужно использовать vue-router.
Интерпретировать файл router/index.js
Мы использовали vue-cli для создания структуры нашего проекта. Вы можете найти его в файле src/router/index.js. Этот файл является основным файлом маршрутизации. Давайте сначала его интерпретируем.
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}
]
})
Добавить привет маршрут и страницу
После ознакомления с основным файлом маршрутизации мы пытаемся добавить конфигурацию маршрутизации. Мы надеемся, что новая страница появится, когда мы введем http://localhost:8080/#/hi в адресной строке. Давайте посмотрим на эффект, который мы хотим получить.
Конкретные этапы операции следующие:
- В каталоге src/components создайте новый файл Hi.vue.
- Напишите содержимое файла, как мы уже говорили, файл должен состоять из трех частей.
<template><script>和<style>. Файл простой и просто печатает предложение.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am JSPang'
}
}
}
</script>
<style scoped>
</style>
- Введение компонентов Hi: мы вводим компоненты Hi над файлом router/index.js.
import Hi from '@/components/Hi' - Добавьте конфигурацию маршрутизации: в массив route[] файла router/index.js добавьте новый объект, код выглядит следующим образом.
{
path:'/hi',
name:'Hi',
component:Hi
}
маршрутизатор-ссылка сделать навигацию
Теперь, изменив строку адреса в адресной строке, можно изменить содержимое страницы. Это не соответствует потребностям, нам нужно иметь достойную навигационную ссылку на странице, и мы можем изменить содержимое страницы, просто щелкнув. сделать ссылку обязательной<router-link>тег, давайте сначала посмотрим на его синтаксис.<router-link to="/">[显示字段]</router-link>
подмаршрут
Измените код навигации App.vue.
Код App.vue, обратите внимание<route-view>Применение.
<template>
<div id="app">
<img src="./assets/logo.png">
<p>导航 ：
<router-link to="/">首页</router-link> |
<router-link to="/hi">Hi页面</router-link> |
<router-link to="/hi/hi1">-Hi页面1</router-link> |
<router-link to="/hi/hi2">-Hi页面2</router-link>
<router-link to="/hi1">Hi页面</router-link>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Перепишите страницу компонентов/Hi.vue
Превратите Hi.vue в общий шаблон, добавьте теги и укажите позиции вставки для подшаблонов. И «Привет, страница 1», и «Привет, страница 2» эквивалентны подстраницам «Привет, страница», и они хотят наследовать отношения. Добавляем теги на «Привет страницу».
Hi1.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi1!'
}
}
}
</script>
<style scoped>
</style>
Hi2.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am Hi2'
}
}
}
</script>
<style scoped>
</style>
Hi.vue код
Обратите внимание на новое представление маршрутизатора
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<router-view class="aaa"></router-view>
</div>
</template>
<script>
export default {
name: 'hi',
data () {
return {
msg: 'Hi, I am JSPang'
}
}
}
</script>
<style scoped>
</style>
Изменить код router/index.js
Теперь у нас есть навигация, родительский шаблон и дочерний шаблон, просто измените наш файл конфигурации маршрутизации. Подмаршрут записывается путем добавления дочернего поля к исходной конфигурации маршрутизации.
children:[
{path:'/',component:xxx},
{path:'xx',component:xxx},
]
За дочерним полем следует массив. Массив в основном такой же, как и другие маршруты конфигурации. Путь и компонент необходимо настроить. Давайте посмотрим на написание конфигурации этого подмаршрута.
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},{
path:'/hi',
component:Hi,
children:[
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})