Говоря о расширенном использовании Vue-router

Go внешний интерфейс vue-router

предисловие

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

основная тема

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

1. Метаинформация маршрутизации

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

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
    mode: 'history',
    routes: [
        {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
    ]
})
//可以在跳转之前判断跳转的组件的名字并用window.document.title赋值
Router.beforeEach((to,from,next) => {
    window.document.title=to.meta.title
})

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

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

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

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

Предположительно, вы должны понимать, о чем я говорю. Правильно, это событие прокрутки, когда страница перелистывается вперед и назад. Как это реализовать? Есть два способа реализовать это. Давайте сначала посмотрим на код.

//刚才我说过的方法直接使用afterEach方法去实现组件的scrollTo归零
Router.afterEach((to,from,next) => {
    window.scrollTo(0,0)
})

Ниже приведено реальное событие отката, чтобы увидеть

//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
    mode: 'history',
    routes: [
        {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
    ]，
    //有两种小的方式进行回滚
    //{ x: number, y: number }
    //{ selector: string, offset? : { x: number, y: number }}
    //第二种方式仅适用于(offset 只在 2.6.0+ 支持)
    scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition)
    return { x: 0, y: 0 }
    }
})

Выше мы ввели метод отката scrollBehavior или поведение прокрутки scrollBehavior, но я думаю, вы можете не понять этот метод.Давайте посмотрим, как это объясняет официальный сайт, используя интерфейсную маршрутизацию, при переходе на новый маршрут вы хотите, чтобы страницы для прокрутки вверх или для сохранения исходного положения прокрутки, например перезагрузки страницы. vue-router может это сделать, и, что еще лучше, он позволяет настроить прокрутку страницы при переключении маршрута. Да, этот метод представляет собой поведение прокрутки scrollBehavior. Еще одно замечание: эта функция доступна только в браузерах, поддерживающих history.pushState. Дополнительные способы использования можно посмотреть на официальном сайте.

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

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

//代码很简单看看就知道了，下面只贴部分代码
{path:'homepages',name:'Homepages',component:homepages,resolve}

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

постскриптум

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

Категории