Знания указывают на то, что Vue Router игнорируется нами

vue-router
Знания указывают на то, что Vue Router игнорируется нами

Сводный обзор

1. Установите многосегментные «параметры пути»

2. Реакция на изменение параметров маршрутизации

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

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

3. Сопоставление маршрута

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

При использовании маршрутов с подстановочными знаками убедитесь, что порядок маршрутов правильный, то есть маршрут, содержащий подстановочные знаки, должен располагаться в конце. Маршрутизация {PATH: '*'} обычно используется для ошибок клиента 404. Если вы используете режим истории, убедитесь, что ваш сервер настроен правильно. При использовании подстановочного знака $ route.Params автоматически добавит именованный параметр pathMatch. Он содержит часть, которая совпадает с URL-адресом через подстановочный знак:

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

4. Расширенный режим сопоставления

// 命名参数必须有"单个字符"[A-Za-z09]组成

// ?可选参数
{ path: '/optional-params/:foo?' }
// 路由跳转是可以设置或者不设置foo参数，可选
<router-link to="/optional-params">/optional-params</router-link>
<router-link to="/optional-params/foo">/optional-params/foo</router-link>

// 零个或多个参数
{ path: '/optional-params/*' }
<router-link to="/number">没有参数</router-link>
<router-link to="/number/foo000">一个参数</router-link>
<router-link to="/number/foo111/fff222">多个参数</router-link>


// 一个或多个参数
{ path: '/optional-params/:foo+' }
<router-link to="/number/foo">一个参数</router-link>
<router-link to="/number/foo/foo111/fff222">多个参数</router-link>

// 自定义匹配参数
// 可以为所有参数提供一个自定义的regexp，它将覆盖默认值（[^\/]+）
{ path: '/optional-params/:id(\\d+)' }
{ path: '/optional-params/(foo/)?bar' }

5. Приоритет соответствия

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

6. Второй и третий параметры push и replace

В версии 2.2.0+ опционально укажите обратные вызовы onComplete и onAbort в качестве второго и третьего аргументов в router.push или router.replace . Эти обратные вызовы будут вызываться соответственно, когда навигация завершается успешно (после разрешения всех асинхронных перехватчиков) или завершается (переход к тому же маршруту или переход к другому маршруту до завершения текущей навигации). В версии 3.1.0+ второй и третий параметры можно опустить, а router.push или router.replace вернет Promise, если Promise поддерживается.

// 组件1跳转组件2

// 组件1
this.$router.push({ name: 'number' }, () => {
    console.log('组件1：onComplete回调');
}, () => {
    console.log('组件1：onAbort回调');
});
// 组件2
beforeRouteEnter(to, from, next) {
    console.log('组件2：beforeRouteEnter');
    next();
},
beforeCreate() {
    console.log('组件2：beforeCreate');
},
created() {
    console.log('组件2：created');
}


// 组件2跳转组件2（不带参数）

this.$router.push({ name: 'number'}, () => {
    console.log('组件2：onComplete回调');
}, () => {
    console.log('组件2,自我跳转：onAbort回调');
});


// 组件2跳转组件2（带参数）

this.$router.push({ name: 'number', params: { foo: this.number}}, () => {
    console.log('组件2：onComplete回调');
}, () => {
    console.log('组件2,自我跳转：onAbort回调');
});

7. Просмотр маршрута

Иногда вам нужно отобразить несколько представлений одновременно (на одном уровне) вместо вложенного отображения, например, при создании макета с двумя представлениями, боковой панелью (боковая навигация) и основным (основное содержимое), в этом случае именованные представления пригодятся. Вместо одного выхода вы можете иметь несколько представлений с индивидуальными именами в интерфейсе. Если у router-view не задано имя, по умолчанию используется значение default.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

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

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

8. Перенаправление

{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: { name: 'foo' }}
{ path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
}}

Обратите внимание, что навигационная защита применяется не к маршруту прыжка, а только к его цели. В приведенном ниже примере добавление защиты beforeEach или beforeLeave к маршруту /a не дает никакого эффекта.

9. Используйте свойства, чтобы отделить $route

Использование $route в компоненте сильно связывает его с соответствующим маршрутом, делая компонент доступным только по определенным URL-адресам, что ограничивает его гибкость.

// router文件
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
    path: '/number/:name',
    props: true,
    // 对象模式 props: { newsletterPopup: false }
    // 函数模式 props: (route) => ({ query: route.parmas.name })
    name: 'number',
    component: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}
// 组件获取
export default{
    props: ['name']
}

10. Глобальная гвардия

  • router.beforeEach global front guard перед вводом маршрута.
  • router.beforeResolve Глобальная защита преобразователя добавлена ​​в версии 2.5.0. Вызывается после вызова beforeRouteEnter.
  • router.afterEach глобальный почтовый хук После ввода маршрута.
// 入口文件
import router from './router'

// 全局前置守卫
router.beforeEach((to, from, next) => {
    console.log('beforeEach 全局前置守卫');
    next();
});
// 全局解析守卫
router.beforeResolve((to, from, next) => {
    console.log('beforeResolve 全局解析守卫');
    next();
});
// 全局后置守卫
router.afterEach((to, from) => {
    console.log('afterEach 全局后置守卫');
});

11. Эксклюзивная защита маршрутизации

  1. beforeEnter global front guard Перед выходом на маршрут.
{
    path: '/number/:name',
    props: true,
    name: 'number',
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
        console.log('beforeEnter 路由独享守卫');
        next();
    },
    component: () => import( /* webpackChunkName: "number" */ './views/Number.vue')
}

12. Защита в компоненте

  • beforeRouteEnter
  • beforeRouteUpdate (новое в версии 2.2)
  • beforeRouteLeave
beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log('beforeRouteEnter 组件内进入守卫');
    next();
},
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log('beforeRouteUpdate 组件内更新守卫');
    next();
},
beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('beforeRouteLeave 组件内离开守卫');
    next();
}

// Компонент 1 переходит к Компоненту 2, затем Компонент 2 переходит к самому Компоненту 2

// Компонент 1 переходит к Компоненту 2, затем Компонент 2 переходит к Компоненту 1

12. Следующий метод охранника

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

  • next(): перейти к следующему хуку в конвейере. Если все хуки выполнены, состояние навигации подтверждается.
  • next(false): прервать текущую навигацию. Если URL-адрес браузера изменится (либо вручную пользователем, либо с помощью кнопки «Назад» в браузере), тогда URL-адрес будет сброшен на адрес, соответствующий исходному маршруту.
  • next('/') or next({ path: '/' }): переход к другому адресу. Текущая навигация прерывается и создается новая.你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • Далее (ошибка): (2.4.0+), если параметр представляет собой следующий экземпляр входящих ошибок, навигация будет прекращена, и ошибка будет передана на Router.oneRror () зарегистрированные обратные обратные вызовы.

13. Поведение при прокрутке

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

Примечание. Эта функция доступна только в браузерах, поддерживающих history.pushState.

// 一般滚动
scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        // 在浏览器按下 后退/前进按钮时
        return savedPosition
    } else {
        return { x: 0, y: 0 }
    }
}

// 锚点滚动
scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
        return {
            selector: to.hash
        }
    }
}

// 异步滚动  2.8.0 新增
scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ x: 0, y: 0 })
        }, 500)
    })
}
Категории