Положение использования Vue-router

внешний интерфейс JavaScript браузер vue-router
Положение использования Vue-router

Хотя есть многоrouterстатьи по теме, ну и что, я просто хочу написать.

На самом деле в vuejs есть нечто, называемое динамическими компонентами.Эффект немного похож на роутинг.Разные компоненты выводятся в соответствии с требованиями.Однако в реальном использовании он очень скуп, что людям неудобно, и нет возможности программно навигация как маршрутизация (push,replace), нет семантического указания пути браузера, динамические компоненты больше подходят для небольших локальных вкладок и показывают волну использования.

<template>
    <div>
        ul>li>tab1+tab2     @click=""  <!-- >>>此处改变下面data中的tab值就可以切换了 -->
        <!-- 此处相当于router-link效果，虽然没有浏览器的url引导，但是可以自己写面包屑 -->
        <component :is="tab"></component>  <!-- 这里就是router-view显示区了 -->
    </div>
</template>

<script>
import tab1 from 'path/to/tab1.vue' //相比vue-router要引入很多文件  麻烦
import tab2 from 'path/to/tab2.vue'
//其实vue-router也引入文件，但是在.vue文件里面引入那么多就很难看

export default {
    data(){
        tab:'tab1' //默认显示tab1
    },
    components:{
        tab1,
        tab2   //es6语法   对象中，键值相同可以这样写
    }
}
</script>

Не будем о динамических компонентах, запустим роутер. Часто используемые API подробно описаны на официальном сайте. Не забудьте посмотреть официальное руководство, не забудьтеофициальный API

конфигурация маршрутизации

Независимо от того, какая конфигурация маршрутизации или конфигурация vuex и т. д., есть соответствующие спецификации.В обычных файлах js будет нехорошо, если они не будут следовать спецификациям.В файлах ts будет сообщение об ошибке. Предпосылка заключается в том, что вы заинтересованы в игре TS.

//  router/index.js
// 此处省略一堆 import
const router = new Router({
    base:'/',
    mode:'history',//default-->hash
    routes:[],
    scrollBehavior:()=>{
        return {x:0,y:0}
    }
})

На самом деле конфигурация очень простая, вот и все.

base

Префикс URL-адреса браузера, по умолчанию'/', если установлено'/some/', затем запустите проект, URL-адрес браузера'/some/...', не повлияет на ссылку статических файлов. Как правило, веб-сайт будет иметь доменное имя, и вы можете указать доменное имя на каталог сервера, поэтому по умолчанию'/'То есть, если вы пишете внутреннее фоновое управление компании, вы можете не использовать доменное имя, это может быть каталог под определенным ip, например, запакованный файл находится в111.22.33.44/admin, в это время, когда конфигурация маршрута совпадает с путем браузера, он начнется с этого/adminНачать отсчет, если база по-прежнему дефолтная/, то конфигурация маршрутизацииroutesизpathдобавить все/admin/префикс иrouter-linkа такжеpushметод также должен добавить это/admin, очень хлопотно, но пока вы устанавливаетеbaseдля'/admin/', внутренняя конфигурация маршрутизации и все связанные методы могут игнорировать имя каталога под IP-адресом сервера. В этом случае также настройтеwebpackизpublicPathтакже для/admin/, я не буду вдаваться в подробности здесь.

mode

Это слишком просто, всего три режима,

hash: браузер будет иметь символ «#», обратитесь к эффекту точки привязки, недостаток уродлив, но совместимость отличная

history:уберите символ #, чтобы адрес выглядел лучше.Конфигурация сервера будет рассмотрена ниже.

abstract: для небраузерных сред этот режим будет применяться, напримерweex

конфигурация сервера в режиме истории

Я использую и себя и свою компаниюnginx, здесьnginx, причина для настройки этогоКогда вы вводите маршрут и снова обновляете страницу (или когда браузер напрямую вводит путь маршрута), когда страница обновится, браузер повторно проанализирует протокол dns и tcp. В это время он отправится на сервер, чтобы найти соответствующие ресурсы в соответствии с URL-адресом браузера. Конечно, мыvue-routerОн обслуживает одну страницу. Соответствующий URL-адрес не должен иметь статических ресурсов на стороне сервера, и появится ошибка 404. Когда настроен следующий оператор перезаписи URL-адреса, обратите внимание на перезапись, а не на перенаправление.Переписать содержимое браузера без изменения URL, переписано наindex.html,потому что этоindex.htmlсделать точку входа в наш проект,index.htmlОн будет читать упакованный в то времяapp.js, вы можете прочитать конфигурацию маршрутизации, чтобы реализовать страницу маршрутизации, соответствующую URL нашего браузера.

hashРежим не нужно настроить, так как браузер игнорирует # и? следующие параметры

Когда файл пакета находится в корневом каталоге,

location / { 
  try_files $uri $uri/ /index.html;
}

Когда файл пакета находится в некорневом каталоге,

location /admin {
  try_files $uri $uri/ /admin/index.html;
}

routes

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

pathнеобходимо указать,nameНужно быть уникальным, не обязательно.

routesКонфигурация следует за последовательным сопоставлением. Когда URL-адрес успешно сопоставлен, он больше не будет совпадать, поэтому что-то вроде403,404страница должна быть написана последней.

aliasИспользование псевдонимов, когда необходимо указатьrouter-viewИспользуйте при отображении компонента, и вы хотите, чтобы URL-адрес браузера соответствовал семантике, которую вы хотите

redirectПеренаправление, параметр может быть путем или объектом (перенаправление на определенное имя), обратите внимание, что перенаправление заключается в изменении содержимого + изменение URL-адреса

scrollBehavior

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

использование маршрутизации

Конфигурация маршрутизации начинается только с корневого каталога/, напишите каждый слойchildrenнаписать слойrouter-view, иначе компонент не отображается. каждое гнездоchildrenуровень иrouter-viewУровни находятся во взаимно однозначном соответствии.

// router/index.js
const router = new Router({
    routes:[
        {
            path:'/',   //此时配置数组的第一层级，即对应app.vue中的router-view
            component:Home,//   <<<----------------------------
            children:[//                                       |
                {   //                                         |
                    //此时第一层级出现children第二层级,------------
                    //那么在这个第二层级所属的第一层级 Home组件中，就要写一层router-view,以此类推
                    path:'user', 
                    component:User,
                }
            ]
        }
    ]
})

Конфигурация маршрутизации генерирует меню меню

Меню на самом деле является навигацией по маршруту, который является маршрутизатором-связью.Многие мелкие партнеры создают другой файл с именем menu.js, а затем моделируют структуру конфигурации маршрутизации для записи массива, а затем проходят для создания dom по этому файлу.feel, а при использовании сторонних компонентов меню ui таких статичных файлов нетусловие(Соответствующее меню текущего маршрута доступа будет выделено, и выделение будет потеряно при обновлении страницы или вводе URL-адреса маршрута для входа на страницу).

В меню много ситуаций,

  1. Фиксированный уровень, такой как фиксированный уровень 2 или уровень 3, в общих системах управления фоном существует множество фиксированных уровней, потому что это красиво и аккуратно. Это удобнее. Домовая структура шаблона также более удобна.
  2. «Персонализированные» продакт-менеджеры, «настраиваемые» меню-меню, неизвестные уровни, здесь для записи dom используется функция рендеринга.

Фиксированный уровень

<template>
    <div class="menu">
        <div class="first-menu" v-for="item,index in menus" :key="item.name">
            <router-link :to="item.name">{{ item.meta.zhName }}</router-link>
            <template v-if="item.children.length">
                <div class="sub-menu" v-for="subItem.subIndex in item.children"
                        :key="subItem.name">
                    <img :src="subItem.meta.icon" />
                    <router-link :to="subItem.name">
                    {{subItem.meta.zhName}}
                    </router-link>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
export default {
    computed:{
        menus(){
            return this.$router.options.routes
            //获取路由配置
        }
    }
}
</script>
<style>
.router-link-active{
    /* 激活样式 */
}
</style>

Здесь я написал только 2 слоя, и не писал стили, если бы использовал что-то вродеelement-uiТакой компонент меню, его нижний слой не отображается какrouter-link, затем программная навигация,clickкогда,pushприбытьitem.name, а стиль навигации по текущему маршруту должен основываться на$route.name(当前路由配置)судить

Неизвестный уровень

Поскольку я не знаю, сколько слоев меню, html-теги в шаблоне не могут свободно перемещаться, поэтому js необходим для управления рекурсией конфигурации маршрутизации. с функцией рендеринга.

<script>
export default {
    computed:{
        menus(){
            return this.$router.options.routes
            //获取路由配置
        }
    },
    // 使用render函数就不需要写template标签的dom了
    render(h){ 
        //这个 h 参数，原来的语义是createElement ，这里使用 h 是方便操作，也是官方建议
        // ...... 这里是操作 menus 的递归代码,再通过render函数循环出来
        return h('div','这是一个div')
        //这里必须return 对应的语法
    }
}
</script>

Синтаксис функции рендеринга см. в официальной документации.функция рендеринга.

Здесь есть оговорка, еслиrouterСделайте контроль разрешений, тогда конфигурация маршрутизации не может пройти$router.options.routesполучить, потому чтоaddRoutesМетод не изменяет исходную конфигурацию, она должна быть вaddRoutesВ то же время сохраните полную конфигурацию маршрутизации вvuex, а затем получить. Контроль разрешений подробно не обсуждается.Есть много статей по теме,но копировать не рекомендуется.Рекомендуется добавить свое понимание.Абсолютного решения нет.

Маршрутизируемое кэширование и анимация перехода

Следует использовать анимацию перехода, обычно используемуюopacityПереход.

<template>
    <transition mode="out-in" name="fade">
        <!-- 这里如果在行内直接用$route.meta去v-if判断缓存 dom结构会变复杂 -->
        <keep-alive :include="aliveRoutes">
            <router-view :key="$route.fullPath" />
            <!-- 此处通过路由的完整路径加上key，当为动态路由时，触发路由组件重新渲染 -->
        </keep-alive>
    </transition>
    <!-- 都是些官方用法 不细说了-->
</template>
<script>
export default {
    computed:{
        aliveRoutes(){
            // this.$router.options.routes  获取路由配置
            //可以配置meta 是否缓存 根据 meta 字段  push到数组里
            return [/* ... */]
        }
    }
}
</script>

крючок маршрутизации

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

Примечание. Чтобы выяснить, что является глобальным хуком, а что хуком в компоненте. И все pre-hooks, нужно вызвать next(), чтобы нормально войти в маршрут, при написании функции-хука нужно обратить внимание, нельзя формировать мертвый цикл

Например

router.beforeEach((to,from,next)=>{
    if (from.name === 'login'){
        next({
            name:'login'  //死循环
        })
        //更多next回调方法可以查看官方文档
    }
})

Использование хуков в компонентах зависит от бизнес-требований, таких как динамическая маршрутизация ↓↓↓.

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

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

Давайте сначала посмотрим, как настроить динамическую маршрутизацию, вот пример страницы сведений

// router/index.js
const router = new Router({
    routes:[
        {
            path:'/list',
            name:'list',
            component:List
        },
        {
            path:'/detail/:id',//此处id对应params.id
            name:'detail',
            component:Detail
        }
    ]
})

<!-- List.vue -->
<template>
    <div>
        <ul>
            <li @click="goDetail(item.id)" v-for="item in someData" :key="item.id">
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    methods:{
        goDetail(_id){
            this.$router.push({
                name:'detail',
                //此处注意只有通过name跳转路由，params才会生效
                //query不受影响
                params:{
                    id:_id  //此处对应routes配置的/:id
                }
            })
        }
    }
}
</script>

<!-- Detail.vue -->

<script>
export default {
    beforeRouteEnter (to, from, next) {
        //此处为路由组件内的钩子，可以通过判断 to.params.id 是否 undefined，
        //进行一些操作，因为即使 to.params.id 是 undefined,路由也能匹配成功
        //因为这些id可能是用来获取数据的，不会在页面显示，不一定能察觉是 undefined
    }
}
</script>

О параметрах маршрутизации

  1. paramsКак указано выше, разговора динамической маршрутизации, только через конфигурацию маршрутизацииnameПерейти, это вступит в силу, даже если динамическая маршрутизация не используется, вы можете пройтиparamsпередать параметры

Вот несколько замечаний:

  • Если вы используете динамическую маршрутизацию, обновите маршрут на странице динамической маршрутизации,paramsпараметры все еще существуют,

  • Если динамическая маршрутизация не используется,paramsПараметр действителен только при переходе по маршруту и ​​будет потерян при обновлении страницы.params

  1. queryпараметры, которые могут бытьpathилиnameПереходы могут передавать параметры, и параметры будут объединены сajaxизgetТак же, как и запрос, он прикрепляется к URL-адресу браузера, а страница обновляется и сохраняется.

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

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

  1. npmилиyarnУстановитьbabel-plugin-syntax-dynamic-import
  2. .babelrcилиbabel.config.jsнастроить
module.exports = {
    plugins:["syntax-dynamic-import"]
}
  1. использование файла маршрута
// router/index.js
const router = new Router({
    routes:[
        {
            path:'/list',
            name:'list',
            component:()=>import(/* webpackChunkName:"SOME_NAME" */'path/to/List.vue')
            //此处 import 是方法  和 es6 的 import 不一样
            //特殊注释语法 相同chunkName 打包到一个js中  可省略
        }
    ]
})

Именованные представления для маршрутов

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

часть API

  1. .vueв файлеthis.$routerОтносится к смонтированному экземпляру маршрутизации, который можно использоватьpushи другие методы.
  2. .vueв файлеthis.$routeТекущий информационный объект маршрутизации, включаяpath,queryи т. д., свойства только для чтения.
  3. router.appСсылаться наrouterУстановленныйvueэкземпляр, который может бытьrouter.app.$options.storeдоступvuex, при условии, чтоmain.jsВ середине вы должны представить сначалаvuex, после введенияrouter, иначе будет сообщено об ошибке.
  4. router.push()Общий метод перехода маршрутизации, параметры{path?:string,name?:string,params?:object,query?:object}, должны знать,pushэто имя метода, не связанное с массивом.
  5. router.replace()заменить текущий маршрут, параметры иpushПоследовательно, разница в том, что текущий маршрут заменяется, то есть нажатие возврата браузера не приведет к возврату к ранее замененному маршруту.
  6. router.go()а такжеrouter.back(), аргумент является целым числом, на несколько шагов вперед или назад.
  7. router.addRoutes()параметры должны соответствоватьroutesДанные конфигурации, динамическое добавление конфигурации маршрутизации к исходной конфигурации.

конец

Если у вас есть какие-либо вопросы или вы ошиблись, вы можете задать

Советы: если вы знаете, как делиться, вы можете пойти дальше.

Категории