Vue Router — официальный менеджер маршрутизации Vue.js, который работает с Vue.js Базовая глубокая интеграция, благодаря которой вы можете легко обеспечить возможности управления маршрутами и навигации для одностраничных приложений (SPA). Сегодня мы поговорим о Vue 3серединаиспользоватьVue Эти вещи о маршрутизаторе.

Установите и настройте Vue Router

Установите маршрутизатор Vue

Установить маршрутизатор Vue нужно только открыть терминал в существующем проекте vue и ввести следующую команду для установки:

установка npm

npm install vue-router@4

Установить в режиме пряжи

yarn add vue-router@4

Настройка маршрутизатора Vue

Чтобы облегчить обслуживание и управление кодом в дальнейшем,Поэтому мы обычно помещаем коды, связанные с маршрутизацией, в одну папку середина.,Настройка маршрутизатора Шаги для Vue следующие:

1. Создайте папку роутера в папке существованияsrc.,существуют. Создайте в этой папке новый файл index.js.
2. существоватьindex.jsсередина引入vue-routerсерединаизcreateRouter и createWebHashHistory Метод, ввести файл подкачки

import { createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'

1. Массив маршрутов определен в существованииindex.js, а правила маршрутизации определены в существующем файле.

const routes = [
  {
    path:'/home',
    name:Home,
    component:Home
  },
  {
    path:'/about',
    component:About
  },
  {
    path:'/list',
    component:List
  },
  {
    path:'/detail',
    component:Detail
  },
  {
    path:'/',
    redirect:'/home'
  }
]

1. существующийindex.jsиспользоватьcreateRouter создать маршрутиз экземпляр, а также шаблон конфигурации маршрутизации и правила маршрутизации, определенные выше.

const router = createRouter({
  history:createWebHashHistory(),
  routes
})

1. В конце существованияindex.js useexport default экспортирует экземпляр маршрутизации, созданный выше.

export default router

1. Зарегистрируйте маршрутизацию: импортируйте файл маршрутизации, созданный выше, в существующийmain.js, и используйте useapp.use для регистрации маршрутизации.

import router from './router'
const app = createApp(App)
app.use(router) //зарегистрироватьсямаршрутизация
app.mount('#app')

1. существоватькомпонентысерединаиспользоватьмаршрутизациякомпоненты существоватьApp.vueсерединаиспользовать<router-view>компоненты Приходить渲染要显示изкомпоненты,существоватьTabbarкомпонентысерединаиспользовать<router-link>компоненты生成链接

Код в компоненте App.vue

<template>
  <Title></Title>
  <router-view></router-view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue'; 
import Title from './components/Title.vue'; 

</script>
<style scoped>
</style>

Код в компоненте Tabbar

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
  </div>
  
</template>
<script setup>
</script>
<style  scoped>
div {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
</style>

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

Хотя выше мы реализовали полный сценарий маршрутизации, нам все равно нужно использовать Vue. Углубленное понимание базовых знаний Router поможет нам лучше понять ииспользоватьVue. Маршрутизатор. Далее для Vue Представлены некоторые основные понятия Router.

Основные понятия Vue Router

1. маршрутизацияустройство：Vue Router Для управления маршрутизацией в приложении предусмотрена маршрутизация. Вю Router Создать экземпляр Vue Router Объект, прописываем правила маршрутизации и подключаем вокруг него другие компоненты.
2. маршрутизация: маршрутизация распределяется по разным компонентам URL адрес。существовать Vue Router В России маршрутизация обычно состоит из path Определены правила и соответствующие компоненты. Когда браузер URL Соответствует маршрутизации path После этого на страницу будет загружен соответствующий компонент. Информацию о середина.маршрутизации можно получить по адресу. route полученное от объекта.
3. Правило маршрутизации: правило маршрутизации создано path、component、name、meta、props состоит из других атрибутов. Среди них путь выражать URL путь, компонент выразить Компонент, который будет отображаться, имя выражатьмаршрутизацияимя,meta выразитьмаршрутизация метаданные, реквизит выражатьмаршрутизация props данные. правила маршрутизации можно зарегистрировать в Vue Router середина.
4. Навигационная стража: Навигационная стража существует Прыжок по Функция перехвата, выполняемая, когда маршруту используется для управления правами доступа маршрутизации и процесса Прыжок по Логика до и после маршруту и ​​т.д. существовать Vue Router , для необязательных выражений API, обычно используемые навигационные средства защиты: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave и т. д. для использования комбинации API и setup Функция для написания компонентов, вы можете использовать onBeforeRouteUpdate и onBeforeRouteLeave Добавить отдельно update и leave сторожить.

Введение в элементы конфигурации Vue Router

нассуществоватьиспользоватьVue Router Когда createRouter создает объект маршрутизатора, он предоставляет нам множество элементов конфигурации. Пример кода с полными элементами конфигурации выглядит следующим образом:

const router = createRouter({
  history: createWebHashHistory(),
  routes: [],
  scrollBehavior: () => ({ top: 0, left: 0 }),
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  parseQuery: null,
  stringifyQuery: null,
  fallback: true
})

Значение каждого элемента конфигурации в приведенном выше коде следующее:

1. history：обозначениемаршрутизацияиз history режим, в настоящее время поддерживается createWebHistory()и createWebHashHistory()модель。
2. routes：определениемаршрутизация规则из数组,Каждое правило маршрутизации является объектом,Включать path、name、component и meta и другие свойства.
3. scrollBehavior：обозначениемаршрутизация切换час滚动行为из Конфигурацияфункция。Долженфункция返回один Включать x и y Объект свойства, позиция прокрутки после перехода на страницу.
4. linkActiveClass：обозначение激活状态из链接из class имя, по умолчанию 'router-link-active'。
5. linkExactActiveClass：обозначение精确соответствоватьиз激活状态из链接из class имя, по умолчанию 'router-link-exact-active'。
6. parseQuery и stringifyQuery：используется для Конфигурациямаршрутизацияиз查询параметр解析исериализацияфункция。Обычно,Нам не нужна дополнительная конфигурация этих двух функций.,потому что Vue Router Была предоставлена ​​реализация по умолчанию.
7. fallback：используется для Конфигурация是否开启 HTML5 History Механизм возврата режима. Значение по умолчанию: true,выражать, когда маршрутизация не соответствует,Автоматически откатится к предыдущей маршрутизации в истории.

Среди вышеперечисленных элементов конфигурации нам обычно нужно настроить только параметры истории и маршрутов. Остальные параметры вы можете понять.

Введение в элементы конфигурации в маршрутах

существовать Vue Router В правилах маршрутизации настраиваются через routes свойство Приходить实现из。routes Обычно используемые конфигурации в свойствах следующие:

1. name：маршрутизация规则из名字。可以используется для编程式导航икомпоненты内部из Прыжок по маршруту。
2. path：маршрутизацияиз路径,Может содержать динамические параметры и регулярные выражения. Например,/user/:id выразить страницу пользователя,:id является динамическим параметром.
3. redirect：маршрутизацияиз重定向规则。Например,{ path: '/', redirect: '/home' } выразитьмаршрутизацию перенаправления корневого пути.
4. component：маршрутизация对应изкомпоненты。может быть один普通изкомпоненты类или异步加载изкомпоненты。
5. children：текущиймаршрутизацияиз子маршрутизация。может быть одинмаршрутизация Массив правил,Также может быть функцией,Динамическое создание правил маршрутизации.
6. meta：маршрутизацияиз元信息,Некоторая дополнительная информация, используемая для описания маршрутизации. Например,Требует ли маршрутизация входа в систему, проверки разрешений и т. д.?
7. components：маршрутизация对应из多个命名视图компоненты。

Прыжок по маршруту

через Вью Router,нас可以проходитьrouter-linkкомпонентыизtoметодииспользоватьrouter.pushфункция以编程方式两种метод导航到маршрутизация。

использовать router-linkкомпоненты

использоватьrouter-linkкомпоненты实现Прыжок по маршруту,нас只нуждаться将菜单按钮использоватьrouter-linkкомпоненты包裹,И существоватьиспользуйте метод выше для прыжка,Пример кода выглядит следующим образом:

<div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
</div>

использоватьrouter.pushфункция

использоватьrouter.pushфункция Программно реализовано Прыжок по маршруту,Нам нужно только привязать событие клика к обычной кнопке,исуществовать事件середина调用router.push()метод即可实现Прыжок,Пример кода выглядит следующим образом:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
    <button @click="gotoAbout"> о </button>
  </div>
  
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {
  router.push('/about')
}
</script>

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

Фактически, когда мы нажимаем <router-link> Когда, Вью Router Этот метод будет вызываться внутренне, поэтому нажмите <router-link :to="..."> Эквивалент вызова router.push(...)

router.push()методсерединаизпараметрможет быть одинстроковый путь,Или объект, описывающий адрес.

// строковый путь
router.push('/users/eduardo')

// объект с путем
router.push({ path: '/users/eduardo' })

// Назовите маршрутизацию и добавьте параметры для построения маршрутизации. url
router.push({ name: 'user', params: { username: 'eduardo' } })

// С параметрами запроса результат /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// приносить хеш, результат /about#team
router.push({ path: '/about', hash: '#team' })

Параметры маршрутизации

существоватьVue В Router это можно сделать следующими способами: маршрутизации Получить параметры

1. проходитьмаршрутизация Параметры передачи пути：существоватьмаршрутизация Конфигурациясерединаиспользоватьдинамическая маршрутизациясоответствовать（Dynamic Route Соответствие), например:

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]

существоватьмаршрутизация路径серединаиспользоватьтолстая кишкавыражатьпараметр,параметр值会被放入route.paramsобъектсередина.нас可以проходить调用route.params获取параметр,Например, адрес доступа: /detail/123.,Затем мы можем получить значение «123» через Route.params.id.

1. Передавайте параметры через параметр запроса: существует Прыжок по маршрутуиспользуйте параметр запроса, например:

// Перейти в существующий компонент
router.push({
  path: '/detail',
  query: { id: 123 }
})

// Перейти к существующему шаблону
<router-link to="/detail?id=123">Detail</router-link>

существоватьмаршрутизациясерединаиспользоватьqueryпараметрчас,параметр值会被放入route.queryобъектсередина.нас可以проходитьroute.query获取параметр。Например,Адрес доступа: /detail?id=123.,Затем мы можем получить значение «123» через Route.query.id.

1. существоватьмаршрутизация Конфигурациясерединапроходитьprops选элемент传递параметр。Например:

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      props: { id: 123 }
    }
  ]

существующий компонент может напрямую получать параметры через использоватьprops

1. существоватьмаршрутизация Конфигурациясерединапроходитьmeta选элемент传递параметр。Например:

const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail,
      meta: { id: 123 }
    }
  ]

Параметры можно получить через Route.meta в компоненте существования.

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

динамическая Маршрутизация относится к маршрутизации, созданной путем принятия части маршрутизации в качестве параметра. Например, если мы хотим создать отдельную страницу для каждого пользователя, мы можем использовать динамическую маршрутизация,Создайте путь для/users/:userIdизмаршрутизация,其середина:userId是одинпараметр。

динамическая маршрутизациясуществоватьопределениемаршрутизациячасиспользоватьтолстая кишка（:）Приходитьвыражатьпараметр。определениединамическая маршрутизациянуждатьсяиспользоватьpath方式определение。Например,Должна быть определена одна динамическая маршрутизация.,Мы можем написать это:

{
  path: '/users/:userId',
  name: 'user',
  component: User
}

существуют В приведенном выше коде,路径серединаиз:userIdвыражатьодинпараметр,его можно получить измаршрутизацияобъектизparamsсвойствосередина获取。существоватькомпонентысередина可以так读取userId：

console.log(route.params.userId)

существоватьиспользоватьдинамическая маршрутизация Когда, Вью Маршрутизатор также поддерживает использование дополнительных параметров и регулярных выражений для определения маршрутизации. Например, вы можете определить динамическую функцию с дополнительными параметрами, например: маршрутизация：

{
  path: '/users/:userId/:postId?',
  name: 'post',
  component: Post
}

существуют В приведенном выше коде,路径серединаизpostIdпараметр是可选из,После него мы добавляем вопросительный знак для обозначения необязательных параметров. Сейчас существуют,Если путь/users/123,ТакpostIdбудетundefined；Если путь/users/123/456,ТакpostIdбудет456。

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

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

Определить Вложенную маршрутизация,нас可以существоватьродительмаршрутизацияизroutes数组серединаопределениеодин子маршрутизацияобъект数组,каждый ребенокмаршрутизацияобъект都Включатьодинpathиодинcomponentсвойство,выразить Путь доступа и соответствующий компонент текущей дочерней маршрутизации. в то же время,Мы также можем определить дочернюю маршрутизацию в маршрутизации объекта.,Таким образом формируется вложенная структура маршрутизации.

насиспользовать Конфигурацияэлементchildrenвыражатьмаршрутизацияиз嵌套关系,Следующий пример кода:

const routes = [
    {
      path: '/',
      component: Home,
      children: [
        {
          path: 'about',
          component: About
        },
        {
          path: 'contact',
          component: Contact
        }
      ]
    }
  ]

существуют В приведенном выше коде,насопределение Понятноодин名为Homeизкомпоненты作为родительмаршрутизацияизкомпоненты,исуществоватьchildren数组серединаопределение Понятно两个子маршрутизация：AboutиContact。так,Когда пользователь получает доступ/aboutили/contactКогда, Вью Router 就会渲染对应из子компоненты,и将其嵌套существоватьHomeкомпоненты内。

именованный маршрут

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

Чтобы определить именованный маршрут,нас可以существоватьмаршрутизацияобъектсерединаиспользоватьnameсвойство Приходитьобозначениемаршрутизацияизимя,Например:

const routes = [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]

существуют В приведенном выше коде,нас为三个маршрутизация分别обозначение Понятноимя：home、aboutиuser。Затем,существовать代码середина,Мы можем использовать эти имена для создания соответствующей ссылки маршрутизации или Прыжок по маршруту.,Например:

<router-link :to="{name: 'home'}">Home</router-link>

<router-link :to="{name: 'about'}">About</router-link>

<router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>

router.push({name: 'home'})

router.push({name: 'user', params: {id: '456'}})

существуют В приведенном выше коде,нас分别использовать Понятно<router-link>компонентыиrouter.push()метод Приходить Прыжок到具有именованный маршрутизмаршрутизация。其середина,использоватьparamsсвойство可以динамичныйобозначениемаршрутизациясерединаизпараметр。

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

охрана маршрута

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

существоватьохрана маршрутасередина,нас通常会用到三个параметр：to、fromиnext。

• to：выражать即将要Прыжокиз目标маршрутизацияобъект,Содержит такую ​​информацию, как путь, параметры и строку запроса маршрутизации.
• from：выражатьтекущиймаршрутизацияобъект,То есть уходящий объект маршрутизации существует.
• next：是одинфункция,используется для进行маршрутизацияконтрольи Прыжок。при звонкеnextфункциячас,маршрутизация Продолжим исполнение вниз。нас可以проходитьnextфункция Приходитьконтрольмаршрутизацияиз行为,Например, рендеринг компонентов, переход к маршрутизации, отмена операций и т.д.

несколько видовиспользоватьnextфункцияиз情况

• next(): выразитьперейти к следующему охрана маршрута。
• next(false): выражать取消текущийиз Прыжок по маршруту。
• next('/path'): выразить переход на указанный путь маршрутизации.
• next(error): выражатьсуществовать Прыжок по Во время процесса маршрутизации произошла ошибка, например, недостаточно разрешений и т. д.

Следует отметить, что,существоватьиспользоватьохрана маршрутачас,наснуждаться显式地调用nextфункция Приходитьконтрольмаршрутизацияиз Прыжоки Функция,В противном случае маршрутизация не будет продолжать выполняться вниз. существовать среди разных охранников,nextфункцияиз行为и Функция也会有所不同,Его нужно вызывать по конкретным сценариям.

Vue Routerсерединаизохрана Маршрут разделен на глобальную охрану маршрутаи Эксклюзивная охрана маршрута：

глобальная безопасность маршрута

глобальная безопасность маршрута — это защита, которая активна во всем приложении и может использоваться для перехвата всех операций маршрутизации. существоватьVue Router@4середина,Есть три глобальных стража：beforeEach、beforeResolveиafterEach。

• beforeEach: существовать Прыжок по Выполняемый перед маршрутом, он может использоваться для глобального управления доступом, переходов по перенаправлению и других операций.
• beforeResolve: существовать Прыжок по Выполняется до завершения маршруту, его можно использовать для ожидания загрузки компонента асинхронной маршрутизации или существования Прыжок. по Сделайте несколько операций перед маршрутом.
• afterEach: существовать Прыжок по Выполняемый после завершения маршрута, его можно использовать для выполнения некоторых операций на странице, таких как мониторинг скрытых мест на странице или изменение заголовков страниц.

Способ проверить, вошел ли пользователь в систему Пример кода маршрута выглядит следующим образом

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

В приведенном выше коде, если пользователь не вошел в систему, страница переходит на страницу входа. Если пользователь уже вошел в систему, выполняется переход next().

Эксклюзивная охрана маршрута

Эксклюзивная охрана маршрута действителен только для текущей маршрутизации и может использоваться для ограничения или расширения прав доступа определенной маршрутизации. существоватьVue Router@4середина,Эксклюзивная охрана маршрута Есть два：beforeEnterиleaveGuard。

• beforeEnter: существования выполняется перед входом в текущую маршрутизацию и может использоваться для расширения прав доступа текущей маршрутизации или выполнения связанных операций.
• leaveGuard: существование выполняется перед выходом из текущей маршрутизации и может использоваться для запроса пользователя или выполнения связанных операций.

использоватьохрана маршрутачас,нас可以существоватьcreateRouterфункциясередина进行зарегистрироваться,Например:

const routes=[
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // Выполнение маршрутизации контроля доступа или связанных с ним операций.
      }
    }
  ]

Ленивая загрузка маршрутов

Ленивая загрузка Маршруты — это способ асинхронной загрузки компонентов маршрутизации по требованию. Код, соответствующий этому компоненту, будет загружаться динамически только тогда, когда соответствующий компонент маршрутизации требует использования. использовать Ленивая загрузка Маршрутов может оптимизировать производительность вашего приложения

существоватьVue Routerсерединаиспользовать Ленивая загрузка маршрутов,нас可以проходитьиспользоватьimport()идинамичныйimport()两种方式Приходить实现

использовать метод import() для реализации отложенной загрузки

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
	{
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
 ]
const router = createRouter({
  history: createWebHistory(),
  routes
})

используйте метод динамического импорта() для достижения отложенной загрузки

const routes = [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

На что следует обратить внимание при использовании Vue Router

1. Динамические параметры не могут иметь косую черту. При упоминании динамических параметров обратите внимание, что URL-адрес не может совпадать с динамическими параметрами.
2. Процесс навигации: маршрутизация аналогична стеку,Каждый скачок маршрутизации будет зафиксирован в записи истории. Если вы перейдете к той же маршрутизации,Так,Последние несколько раз в истории игнорируются. По умолчанию,Вновь пройденная маршрутизация не вызовет процесс обновления маршрутизации.,你нуждаться显式地использоватьrouter.pushили者router.replaceметод Приходить更新到текущиймаршрутизация。
3. Навигация отменена：если тысуществоватьbeforeRouteLeaveилиbeforeRouteUpdate守卫середина执行Понятно异步操作,则必须确保Должен异步操作已经完成и调用Понятноnext(true)чтобы обеспечить возможность навигации。

OK,оvue3серединаиспользоватьVue Это все, что касается контента, связанного с Router. Если у вас есть какие-либо вопросы, оставьте сообщение в области комментариев. Если оно вам нравится, поставьте лайк, подпишитесь и добавьте его в избранное. !