Научитесь использовать vue-router для создания одностраничного приложения (SPA) за 30 минут.

vue-router

1. Что такое одностраничное приложение

Одностраничное веб-приложение (SPA) — это приложение только с одной веб-страницей. Одностраничное приложение (SPA) — это веб-приложение, которое загружает одну HTML-страницу и динамически обновляет эту страницу по мере того, как пользователь взаимодействует с приложением. Браузер изначально загружает необходимые HTML, CSS и JavaScript, и все операции выполняются на этой странице под управлением JavaScript. Поэтому модульная разработка и дизайн очень важны для одностраничных приложений.

Преимущества и недостатки одностраничных приложений

【1】Преимущества

  • Опыт бесперебойной работы:Ощущение, сравнимое с родными приложениями, при частом переключении процесс не будет ощущаться как «прерванный». Поскольку структура интерфейса имеет только базовую передачу данных локально, с сервером, который легко мигрировать, вы можете использовать относительно небольшую цену, перейти на продукт для настольных ПК или различные гибридные продукты для мобильных устройств.
  • Полная компонентизация интерфейса:Фронтенд-разработка больше не основана на страницах, а больше на идее компонентизации, а структура и организация кода более стандартизированы, что легко модифицировать и настраивать;
  • Совместное использование API:Если ваш сервис мультитерминальный (браузерный, Android, iOS, WeChat и т. д.), вам удобен режим одностраничного приложения для совместного использования API на нескольких терминалах, что может значительно снизить нагрузку на сервер. Части пользовательского интерфейса, которые легко изменить, были предварительно размещены на нескольких концах, а API-интерфейсы, на которые влияет только модель бизнес-данных, легче стабилизировать и предоставлять более качественные услуги;
  • Совместное использование компонентов:В некоторых сценариях, не требующих высокой производительности, или продукт находится в стадии быстрых проб и ошибок, с помощью некоторых технологий (Hybrid,React Native), компоненты могут совместно использоваться на нескольких концах, что способствует быстрой итерации продукта и экономии ресурсов.

[2] Недостатки

  • Загрузите много ресурсов в первый раз:Чтобы предоставить пользователям все функции продукта на странице, при загрузке страницы сначала должно быть загружено большое количество статических ресурсов, а время загрузки относительно велико, однако эту проблему можно решить путем маршрутизации ленивой загрузки.
  • Не дружит с поисковыми системами:Поскольку подавляющая часть интерфейса создается динамически, поисковым системам нелегко его индексировать.
  • Сложность разработки относительно высока:Навыки разработчика в области JavaScript должны пройти тест, и в то же время он должен иметь представление о компонентизации и шаблонах проектирования.То, что он видит, уже не простая страница, а настольное программное обеспечение, работающее в среде браузера.

3. Что такое vue-маршрутизатор

vue-router — официальный плагин маршрутизации для Vue.js, глубоко интегрированный с vue.js и подходящий для создания одностраничных приложений. Одностраничное приложение Vue основано на маршрутизации и компонентах.Маршрутизация используется для установки путей доступа и сопоставления путей и компонентов. В традиционных страничных приложениях некоторые гиперссылки используются для переключения страниц и переходов между ними. В одностраничном приложении vue-router это переключение между путями, то есть переключение компонентов.Суть модуля маршрутизации заключается в установлении отношения отображения между URL-адресом и компонентами..

Что касается того, почему мы не можем использовать тег a, это связано с тем, что все одностраничные приложения создаются с помощью Vue (когда ваш проект упакован с помощью npm run build, будет создана папка dist, которая содержит только статические ресурсы и индекс .html), поэтому тег , который вы написали для перехода на страницу, не работает, для управления им необходимо использовать vue-router.

В-четвертых, установите vue-router

npm install vue-router --save-dev

Пять, настройка и простое использование vue-router

[1] Добавьте папку маршрутизатора в папку src и добавьте в нее файл index.js.

​

[2] Представлено в файле main.js.

​

[3] Конфигурация index.js в файле маршрутизатора

import Vue from 'vue'
import Router from 'vue-router'

// 引入page1和page2组件
import page1 from '@/components/page1'
import page2 from '@/components/page2'

Vue.use(Router)

export default new Router({
  // 定义路由，每个路由应该映射一个组件，component对应引入的组件名
  routes: [
    {
      path: '/page1',
      name: 'page1',
      component: page1
    },
    {
      path: '/page2',
      name: 'page2',
      component: page2
    },
  ]
})

【4】Использовать

Мы настроили маршруты /page1 и /page2, которые можно использовать на странице app.vue.

<template>
  <div id="app">
    <!-- 
      1、使用router-link标签来导航 
      2、通过传入 `to` 属性指定链接
      3、<router-link> 默认会被渲染成一个 `<a>` 标签
      4、当<router-link>对应的路由匹配成功，将自动设置class属性值为.router-link-active
    -->
    <router-link to="/page1">page1</router-link>

    <!-- 通过路由设置的name值进行导航 -->
    <router-link :to="{name: 'page2'}">page2</router-link>

    <!-- 使用编程式导航 -->
    <span @click="gotoPage1">gotoPage1</span>

    <!-- 占坑，路由匹配到的组件将渲染在这里 -->
    <router-view />
  </div>
</template>

<script>
  export default {
    methods: {
      gotoPage1() {
        // 编程式导航
        this.$router.push('/page1')
      }
    },
  }
</script>

【5】Эффект

​

6. Разница между this.$router и this.$route

[1] маршрутизатор:Это экземпляр VueRouter, который эквивалентен глобальному объекту маршрутизатора, который содержит множество свойств и подобъектов, таких как объект истории.Программная навигация по маршруту может быть пропущена с помощью this.$router.push.

​

[2] маршрут:Эквивалентно текущему объекту маршрутизации, вы можете получить от него имя, путь, параметры, запрос и т. д.

​

Семь, динамическая маршрутизация

【1】Официальное объяснение

Параметры динамического пути, используйте двоеточия:отметка. При сопоставлении маршрута значение параметра устанавливается равным this.$route.params, которое можно использовать в каждом компоненте.

Вы можете установить несколько «параметров пути» в маршруте, и соответствующие значения будут установлены в $route.params. Например:

модель путь совпадения $route.params
/user/:username /user/evan

{ username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123

{имя пользователя: 'эван', post_id: '123' }

【2】Применимые сценарии

Например, страница сведений о продукте имеет ту же структуру страницы, но идентификатор продукта отличается, поэтому в настоящее время можно использовать динамическую маршрутизацию.

Настройка параметров динамической маршрутизации

// 配置路由
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/goods/:id', component: goods}
  ]
})

товарный компонент

  <template>
    <div>
      当前商品id为：{{$route.params.id}}
    </div>
  </template>

Введите /goods/123 в адресную строку браузера

​

Восемь, вложенная маршрутизация

Вложенная маршрутизация — это вложение своей подмаршрутизации в маршрутизацию, а ключевые атрибуты подмаршрутизацииchildren

Несколько компонентов могут быть вложены в каждый подмаршрут, а подкомпоненты имеют навигацию по маршруту и ​​контейнеры маршрутизации.

Пример: Предположим, что страница страницы содержит подкомпонент дома и подкомпонент товаров.

Настройте вложенные маршруты (добавьте дочерний атрибут под маршрутом страницы, настройте два подкомпонентных маршрута для дома и товаров)

export default new Router({
  // 定义路由，每个路由应该映射一个组件，component对应引入的组件名
  routes: [
    {
      path: '/page',
      name: 'page',
      component: page,
      children: [{
        path: '/page/home',
        name: 'home',
        component: home,
      }, {
        path: '/page/goods',
        name: 'goods',
        component: goods,
      }]
    },
    {
      path: '/page2',
      name: 'page2',
      component: page2
    },
  ]
})

конфигурация компонента страницы

<template>
  <div>
    <p>page组件</p>
    <router-link to="/page/home">home</router-link>
    <router-link to="/page/goods">goods</router-link>

    <!-- 占坑，匹配的子组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

Эффект

​

9. Программная навигация

【1】router.push

Нажмите на ...">router.push(...)

$router.push(...) может быть строковым путем или объектом, описывающим адрес. Например:

        // 字符串
        router.push('home')

        // 对象
        router.push({ path: 'home' })

        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' } })

        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' } })

        // 注意：如果提供了path,params会被忽略。需要提供路由的name或手写完整的带有参数的path
        const userId = '123'
        router.push({ path: '/user', params: { userId }}) // -> /user params不生效
        router.push({ name: 'user', params: { userId }}) // -> /user/123 params生效
        router.push({ path: `/user/${userId}` }) // -> /user/123 params生效

[2] маршрутизатор.заменить

Подобно router.push, единственное отличие состоит в том, что он не добавляет новые записи в историю, а заменяет текущие записи истории одну за другой с тем же именем метода.

【3】router.go(n)

Параметр этого метода — целое число, означающее, сколько шагов вперед или назад в записи истории, аналогично window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 后退 3 步记录
router.go(-3)

10. Именованные маршруты

Это необходимо для добавления атрибута имени при настройке маршрутов маршрутизаторами.Удобнее идентифицировать маршрут по имени, особенно когда имя пути вложенного маршрута очень длинное.

export default new Router({
  routes: [
    {
      path: '/page',
      name: 'page',
      component: page,
      children: [{
        path: '/page/home',
        name: 'home',
        component: home,
      }]
    },
  ]
})

Следующие четыре способа могут перейти к пути /page/home

    <router-link to="/page/home">home</router-link>
    <router-link :to="{name: home}">home</router-link>
    this.$router.push('/page/home')
    this.$router.push({name: home})

11. Именованные представления

Проще говоря, определите разные имена для разных router-view и визуализируйте соответствующие компоненты через имена. Если router-view не задает имя, по умолчанию используется значение по умолчанию.

[1] Применимые сценарии

Например, чтобы создать макет с тремя представлениями topNav (верхняя навигация), sidebar (боковая навигация) и main (основное содержимое), на этот раз пригодятся именованные представления.

Настройка маршрутизации: в корневом маршруте определены три компонента.

индекс (основное содержимое): сопоставлен с представлением маршрутизатора по умолчанию

topNav (верхняя навигация): отображается в представлении с именем top of router-view

sideNav (боковая панель): сопоставляется с представлением Router-View с именем side

export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default: Index,
        side: SideNav,
        top: TopNav,
      },
      children: [{
        path: '/home',
        component: Home,
      }, {
        path: '/goods',
        component: Goods,
      }]
    },
  ]
})

Файл App.vue (добавьте атрибут имени, чтобы создать два именованных представления и представление по умолчанию по умолчанию)

    <router-view class="view one" name="top"></router-view>
    <router-view class="view two" name="side"></router-view>
    <router-view class="view three"></router-view>

Эффект

​

12. Перенаправление и псевдонимы

[1] Перенаправление)

Перенаправление /a - это /b, когда пользователь посещает /a, URL-адрес будет заменен на /b, а затем перейдет на страницу /b.

    // 重定向目标可以是一个path
    { path: '/a', component: A, redirect: '/b',  },

    // 重定向目标也可以是一个命名的路由
    { path: '/a', component: A, redirect: {name: 'b'}},
    
    // 甚至是一个方法
    { path: '/a', component: A, redirect: to => {
      // 方法接收目标路由to作为参数 to包含hash、params、query等属性
      // return 重定向的字符串路径/路径对象
      return '/b'
    }}

【2】Псевдоним

/a имеет псевдоним /b, что означает, что когда пользователь посещает /b, URL-адрес остается /b, но переходит на страницу /a, как если бы пользователь посетил /a.

  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]

Тринадцать, режим vue-router

【1】хэш (по умолчанию)

URL-адрес режима хеширования: http://www.abc.com/#/hello

Хэш — это символ # в URL-адресе адресной строки, например, этот URL-адрес: http://www.abc.com/#/hello, значение хеша — #/hello. Его характеристика заключается в том, что хотя хэш появляется в URL-адресе, он не будет включен в HTTP-запрос и никак не повлияет на серверную часть, поэтому изменение хеша не приведет к перезагрузке страницы.

【2】история

URL-адрес в режиме истории: http://www.abc.com/hello

Иногда из-за навязчивого расстройства не может выдержать символ # в URL-адресе в режиме или для деловых нужд URL-адрес не может принести $ ##. В настоящее время вам следует рассмотреть режим истории Vue-router.Внешняя конфигурация режима истории аналогична приведенной выше, но поскольку переход URL-пути в режиме истории Vue-Router использует H5 History API добавлен динамический и обновил страницу вручную.В связи с тем, что маршрут генерирует ошибки 404, также необходимо настроить сервер для перенаправления маршрутизации на страницу первого уровня.

【3】Конфигурация режима

export default new Router({
  mode: 'history',
  routes: [...]
})

14. Маршрутная охрана

Vue — Route Guard (жизненный цикл маршрутизатора)

Статья постоянно обновляется каждую неделю, вы можете искать в WeChat "Особенности интерфейса"Прочтите это в первый раз, ответьте [видео】【книги】 Получите 200 ГБ видеоматериалов и 30 книг в формате PDF.



Категории