5 минут, чтобы понять основы использования vue-router

vue-router
5 минут, чтобы понять основы использования vue-router

Цель: понятьvue-routerиспользование

Время чтения: 5 минут

Источник: не оригинал, составлено из видео.

основное содержание

  1. Основное использование vue-route
  2. Крючки роутера и порядок выполнения
  3. Как передать параметры роутеру

текст

router.gif

1. Основное использование

1-1. Создайте папку Route и создайте новый index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Routes from './routes.js'

Vue.use(VueRouter);

export default new VueRouter {
  mode: 'hash',
  routes
}

Обратите внимание на две вещи в приведенном выше коде:

  • Первый момент: сторонние компоненты Vue должны быть установлены с помощью Vue.use( . . . . ).

    • При установке компонента маршрутизатора регистрируются два глобальных компонента.
      • маршрутизатор-ссылка: прыжок
      • router-view : где отображать контент
    • В каждом компоненте будет два свойства(В свое время я не знал разницы между router и route, запомните следующие два момента, вам не придется снова ошибаться.)

      • $router : содержит всеметод

        • $router.push({path:'home'})
        • $router.replace({path:'home'})//Заменить маршрут без истории

      • $route : содержит всеАтрибуты

  • Второй момент:export default new VueRouter ({ })Существуют таблицы сопоставления для различных атрибутов и маршрутов.

    • режим: хэш: по умолчанию, /#/
    • mode: history: /
    • маршруты сопоставление маршрутов, какой маршрут показывает, какой компонент vue
    • ...

1-2: построить маршруты.

import Home from '../view/Home.vue';
...

export default [
  {
    path: '/',  // 重定向到home页面
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
  ...
]

1-3: Зарегистрируйте роутер в main.js

...
import router from './router'
...
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

OK: На данный момент базовая маршрутизация реализована.

Перейдем к app.js и используем router-link и router-view.


<template>
  <div id="app">
    <ul class="nav">
      <li class="nav-item">
        <router-link class="nav-link" to="/home">Home</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

Маршрут ленивой загрузки выглядит так.

{
  path: '/home',
  component: () => import('../view/Home.vue')
}

Вложенные маршруты выглядят так.

{
    path: '/user',
    component: User,
    // child 下面放需要嵌套的路径和视图
    children: [
      ...
      {
        path: '/add',
        name: 'userAdd',
        component: () => import('../view/UserAdd.vue')
      }
      ...
    ]
  },

2. Хуки роутера и порядок выполнения

  1. Global beforeEach: обычно используется для управления разрешениями.
  2. BeforeEnter в маршрутизации: мало используется
  3. Вызовите beforeRouteEnter в компоненте: в этом методе этого нет
  4. глобальный router.resolve
  5. глобальный
  6. Вызов компонента beforeRouterLeave: leave — это напоминание, отправлять ли форму, обращать ли внимание и т. д.
  7. beforeRouterUpdate

beforeRouterUpdate используется, когда параметры маршрута обновляются, но сам маршрут не обновляется.

router.beforeEach((to, from, next) => {
  // 每个路由钩子都会有三个参数，是to、from、next
  // 具体如何使用，我会单独写一个使用jwt权限控制的文章，在那里面结合实际使用来说明三个参数的使用和路由钩子的使用情况
})

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

3. Как передать параметры

Есть два способа передать параметры

路由:/detail/1 Vs 路径：/detail?id=1

  • Передать параметры в маршруте
vue代码如下:

<router-link to="/user/detail/1">用户1</router-link>
-----

routes代码如下:

{   
    // 路径里面传递参数是通过斜线传递的：比如/user/detail/1
    path: 'detail/:id',
    name: 'userDetail',
    component: () => import('../view/UserDetail.vue')
}
----

这种参数在组件里面如何获取呢？

this.$route.params.id
  • Передать параметры в виде вопросительных знаков в пути
<router-link to="/user/detail?id=1">用户1</router-link>

这种传递方式如何在组件里面获取参数呢？

this.$route.query.id

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

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

ps: я новичок во фронтенде, и ведение блога — это способ записывать собственное обучение, а написанный текст должен быть неясным, несовершенным и неправильным. Если что-то не так, надеюсь, что великий Бог меня раскритикует и поправит, буду очень благодарен.

Спасибо за просмотр!

Меня зовут Хай Миньюэ, я первокурсник начальной школы.

Категории