Маршрутизация для расширенного использования Vue

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

Установить

Прежде чем использовать Vue Router, нам нужно сначала установить его. Его можно установить с помощью следующей команды:

npm install vue-router

простая маршрутизация

Во-первых, нам нужно создать экземпляр Vue и импортировать в него Vue Router:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Затем мы можем определить некоторые правила маршрутизации, такие как:

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

Среди них каждое правило маршрутизации представляет собой объект, в том числе  path и  component атрибуты. Когда пользователь посещает маршрут, Vue Router находит соответствующий компонент в соответствии с правилами маршрутизации и отображает его на странице. Здесь мы также определяем подстановочный маршрут  '*', который будет автоматически переходить на домашнюю страницу, когда пользователь получает доступ к несуществующему маршруту.

Далее мы можем создать  router экземпляр и передать ему правила маршрутизации:

const router = new VueRouter({
  routes
})

Наконец, внедрите  router экземпляр в экземпляр Vue:

new Vue({
  router
}).$mount('#app')

Таким образом, мы успешно реализовали простую функцию маршрутизации.

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

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

{
  path: '/user/:id',
  component: User,
  props: true
}

Здесь мы используем двоеточие  : для обозначения параметра, а имя параметра —  id. И  props передавать параметры компонентам через атрибуты.

В компоненте мы можем определить  props свойство для получения параметров:

props: ['id']

Таким образом, когда пользователь посещает  /user/123 , Vue Router  123 передает его в качестве параметра компоненту, и компонент может  this.id через него получить значение параметра.

вложенные маршруты

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

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'profile',
        component: Profile
      }
    ]
  }
]

В этом примере мы определяем родительский маршрут  /dashboard, который содержит два дочерних маршрута  /dashboard/home и  /dashboard/profile. В родительском компоненте  Dashboard мы можем  <router-view> визуализировать дочерний компонент через метку.

навигационная охрана

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

• beforeEach: Глобальный передний щит. Будет вызываться перед каждым переключением маршрута.
• beforeResolve: Глобальная защита синтаксического анализа. Он вызывается после синтаксического анализа каждого компонента маршрутизации, и компонент можно изменить после завершения синтаксического анализа.
• afterEach: глобальный пост-хук. Будет вызываться после каждого переключения маршрута.
• beforeEnter: Эксклюзивный охранник маршрута. Определенный в конфигурации маршрутизации, он будет действовать только для текущего маршрута.
• beforeRouteUpdate: Защита обновления маршрута. Вызывается при обновлении маршрута, например при изменении параметра.
• beforeRouteLeave: Маршрут оставляет охрана. Вызывается, когда маршрут покидает текущий компонент.

Вот пример, который демонстрирует, как использовать  beforeEach навигационные охранники для проверки разрешений:

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = checkAuth()

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

function checkAuth() {
  // todo: 判断用户是否已经登录
}

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

Вот простой пример, показывающий, как использовать Vue Router:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

export default {
  name: 'App',
  components: { Home, About, Contact }
}
</script>

<style>
/* 样式 */
</style>

эпилог

Vue Router — важная часть Vue, которая позволяет нам более удобно управлять маршрутизацией. В этой статье мы представили базовое использование Vue Router, включая статическую маршрутизацию, динамическую маршрутизацию, вложенную маршрутизацию и защиту навигации. Надеюсь, эта статья поможет вам. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте сообщение и дайте мне знать.