Может быть более подробным, чем документация - VueRouter полностью на севере

внешний интерфейс JavaScript Vue.js vue-router
Может быть более подробным, чем документация - VueRouter полностью на севере

предисловие

Что касается названия, то его не следует рассматривать как титульную партию, потому что содержание действительно длинное и всеобъемлющее. В основном оно основано на официальном сайте и подробно обобщает его, приводя примеры многих вещей. Убедитесь, что все новички могут понять !Так на самом деле многое есть Это более подробно чем на официальном сайте.Что хотите,если не разбираетесь на официальном сайте,то ответ в принципе можно найти здесь!Я изначально хотел разбить на две статьи, но думать о том, что мужчины длиннее, не так уж и плохо, поэтому я надеюсь, что у всех есть любимые следы от глаз (забавно)

Особенности: Эта статья в основном относится к официальным документам.За исключением менее часто используемых эффектов перехода и сбора данных, все они проанализированы и объяснены.Объяснение:Каждый раздел имеет более популярное объяснение на основе документа.Пример:Каждый раздел отдельно примеры были добавлены для подробных объяснений, а те, которые официально не включены, сложны или пропущены, подробно объясняются Резюме: В каждом разделе будут советы, на которые следует обратить внимание, опыт и краткое изложение фактического развития.

Инструкции:

Если вы новичок, начните с самого начала.Содержание первых 5 глав состоит в том, чтобы постепенно ознакомить вас с VueRouter, а в главе 5 также приведены примеры кода локального фактического построения.

Если у вас есть определенное представление о VueRouter, вы можете просмотреть его в соответствии с каталогом или ключевыми словами глобального поиска для быстрого поиска.

Tucao:Большинство статей по VueRouter которые можно найти сейчас это статьи которые полностью скопированы с официальных документов.Мне очень противны такие статьи!Питания в принципе нет!То что вы не понимаете на официальном сайте в принципе непонятно от него.

1 Обзор

Vue-router и vue.js глубоко интегрированы и подходят для одностраничных приложений.Традиционная маршрутизация использует некоторые гиперссылки для переключения страниц и переходов.В одностраничных приложениях vue-router используется для переключения между компонентами.其本质就是:建立并管理url和对应组件之间的映射关系.

2, простой пример

Вот простой пример официального веб-сайта, чтобы понять основные компоненты vue-router и получить предварительное представление о vue-router.

HTML

Первая — это html часть, здесь есть две основные функции:

1. Компонент router-link используется для навигации, и пользователь щелкает, чтобы переключиться на соответствующий вид.

2. Компонент router-view используется для указания места отображения переключаемых представлений (страница также может иметь несколько router-view для отображения конкретных представлений и поддержки вложенности).

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript

Фактический код написания проекта здесь может относиться к моей более поздней главе 5. Ниже я кратко суммирую шаги:

  • 1, подготовка материала:
    • 1.1 Представляем готовый Vue и vue-router (если у вас есть npm)
    • 1.2 Компоненты, вводящие переходы маршрутизации В следующем примере «Foo» и «Bar»
    • 1.3 Запускаем глобальный компонент VueRouter например: Vue.use(VueRouter) Только после этого начинает выполняться vue-router.
  • 2. Настройте экземпляр маршрутизации: подробно настройте путь каждого маршрута с помощью новой функции VueRouter(), соответствующих компонентов и всех конфигураций, связанных с маршрутизацией.
  • 3. Подключите экземпляр маршрутизации к корневому экземпляру new Vue({router}).$mount('#app')
// 0\. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1\. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2\. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3\. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4\. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

Внедрив маршрутизатор, мы можем пройтиthis.$routerДоступ к маршрутизатору или черезthis.$routeДоступ к текущему объекту маршрута:

Tips: Здесь я кратко объясняю$routerи$routeРазница:

  • $routerозначает весьэкземпляр маршрутизации, вы можете манипулировать всем маршрутом, добавляя к нему произвольные объекты маршрута через '$router.push'.
  • $route: относится к текущему экземпляру маршрутизации ('$router')объект маршрута;
  • Экземпляр маршрута может содержать несколько объектов маршрута, которые являются отношениями включения родитель-потомок.
// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

3, взаимосвязь схемы vue-router (если есть проблема, ее необходимо изменить)

router.js на картинке — это файл конфигурации экземпляра маршрутизации.

vue-router简略图示关系
PS:Картинка здесь немного неточна, to — это не просто значение пути, это зависит от конкретной ситуации.Подробности смотрите в официальном API.

4, Подготовка к учебе! Важно

4.1 Подготовка оборудования

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

  • Официальный сайт онлайн пример:кликните сюдаЧерез онлайн-примеры следуйте инструкциям, наблюдая и стуча!
  • Пройдите мой учебник в главе 5 и создайте его в своем собственном локальном фактическом проекте, чтобы увидеть эффект.

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

4.2 Психологическая подготовка

При обучении настройке vue-router необходимо учитывать два уровня:

  • Html: соответствует тому, что в vue-router<router-link>и<router-view>
  • JavaScript: это конфигурация конкретного экземпляра маршрутизации. Вокруг этих двух уровней также осуществляется настройка всего vue-router.Вы должны иметь это осознание при обучении, чтобы его было легче понять и использовать!

5, фактический пример строительства проекта

5.1, скачайте vue-router:

	npm i vue-router -s

5.2, настройте router-link и router-view в компоненте vue

  • router-link: Карта маршрутизации. Создает тег для определения ссылки навигации по маршруту (пользователь может перейти, щелкнув). Укажите целевой адрес через атрибут to. По умолчанию он отображается как тег с правильной ссылкой.
  • Router-view: предназначен для рендеринга компонента представления, соответствующего вашему маршруту в метке.Нажмите на представление именования документов.
<!--这里引用官方例子的写法-->
<div id='app'>
	<p>
		<router-link to="/user/foo">/user/foo</router-link>
		<router-link to="/user/bar">/user/bar</router-link>
	</p>
	<router-view>PS:写在这里,即router-view里的内容是不会显示在页面上的!</router-view>
</div>

оtoБолее подробное использование:МожетОбратитесь к официальной документации API, Использование очень простое, и я не буду повторяться здесь.

5.3, настройте файл router.js экземпляра маршрутизатора

//第一步:引入必要的文件
import Vue from 'vue';//加载全局组件时,都需要引入Vue
import Router from 'vue-router';//引入vue-router
//引入在路由中需要用到的组件
import User from '@/components/user/User' //这里省略了.vue
...

//第二步:加载Router
Vue.use(Router);//加载全局组件Router

//第三步:配置路由实例
export default new Router({
	//mode:'history', //路由模式:默认为hash,如果改为history,则需要后端进行配合
	//base:'/',//基路径:默认值为'/'.如果整个单页应用在/app/下,base就应该设为'/app/'.一般可以写成__dirname,在webpack中配置.
	routes:[{
		path: '/user', 
		name: 'user', //给路由命名,设置的name要唯一!
		component: User//就是第一步import的组件
		},{
			//路由懒加载:单页面应用,首页时,加载内容时间过长.运用懒加载对页面组件进行划分,减少首页加载时间
			path:'/Page',
			name:'Page',
			component:resolve => require(['@/components/Page'],resolve)
			//此时component则不需要在第一步import
		}]
})

5.4. Вставьте router.js в main.js и подключите его к экземпляру Vue.

Рекомендуется настраивать роутер отдельным js-файлом в реальном проекте, что более понятно и не должно смешиваться с main.js.

import router from './router'

new Vue({
  el: '#app',
  router,//不简写就是router:router,
  store,
  template: '<App/>',
  components: {
  App

  } })

5.5, роутер, маршруты, маршрут не отличишь?

  • 1, маршрутизатор: обычно относится к экземпляру маршрутизации, например $router.
  • 2, маршруты: относится к API маршрутов экземпляра маршрутизации маршрутизатора и используется для настройки нескольких объектов маршрутизации маршрутов.
  • 3, route: относится к объекту маршрутизации, например, $route относится к текущему объекту маршрутизации.

5.6, Резюме

На данный момент базовый vue-маршрутизатор завершен, вот простая демонстрация, чтобы понять этапы его реализации. Подводя итог, при написании маршрутов vue не забудьтеСделайте эти три вещи: 1. Подготовка:Вставьте router.js в main.js и подключите его к экземпляру Vue.2, настройте экземпляр маршрутизации (ключ):Представьте Vue, vue-router в router.js и настройте экземпляры маршрутизации.3, конфигурация в компоненте:Это настройка router-link и router-view.

6, два режима vue-router

Обычно одностраничное приложение (SPA) не запрашивает страницу, а только обновляет представление.Vue-router предоставляет два способа реализации внешней маршрутизации: режим хэширования и режим истории.Вы можете использовать параметр режима, чтобы решить, какой метод использовать.

6.1, Хэш-режим

vue-router по умолчанию использует хеш-режим. Используйте хэш URL-адреса для имитации полного URL-адреса.此时url变化时,浏览器是不会重新加载的.Хэш (т.е. #) — это точка привязки URL-адреса, которая представляет собой позицию на веб-странице. Если вы измените только часть после #, браузер будет прокручивать только соответствующую позицию без перезагрузки страницы.#仅仅只是对浏览器进行指导,而对服务端是完全没有作用的!它不会被包括在http请求中,故也不会重新加载页面.в то же времяКогда хэш изменится, URL-адрес будет записан браузером, поэтому вы можете использовать запасной вариант браузера.

总而言之:Hash模式就是通过改变#后面的值,实现浏览器渲染指定的组件.

6.2, Режим истории

Если вам не нравится стиль хэш #, вы можете использовать режим истории. Этот режим использует преимущества новой истории HTML5.Методы pushState() и replaceState().В дополнение к предыдущим методам «назад», «вперед» и «перейти» эти два новых метода могут быть применены к добавленной функции замены истории браузера.В режиме «История» URL-адрес изменяется в истории, но он не будет отправлять запрос. на бэкэнд немедленно.注意点:Хотя режим истории может отбросить неприглядный #, вы также можете нормально перемещаться вперед и назад, но после обновления f5 браузер в это время получит доступ к серверу.Если нет фоновой поддержки, вы получите 404 в это время Официальный документ дает описание: «Однако, чтобы хорошо играть в этот режим, ему также нужна поддержка фоновой конфигурации. Поскольку наше приложение представляет собой одно клиентское приложение, если фон не имеет правильной конфигурации, когда пользователь обращается напрямую, он вернет 404. И что? Вам нужно добавить ресурс-кандидат, который охватывает все случаи на сервере; если URL-адрес не соответствует ни одному из статических ресурсов, он должен вернуть ту же страницу index.html».

总而言之:History模式就是通过pushState()方法来对浏览器的浏览记录进行修改,来达到不用请求后端来渲染的效果.不过建议,实际项目还是使用history模式.

пример:

const router = new VueRouter({
  mode: 'history', //如果这里不写,路由默认为hash模式
  routes: [...]
})

7, динамическое сопоставление маршрутов

Когда нам часто нужно сопоставить определенный шаблон со всеми маршрутами, все они сопоставляются с одним и тем же компонентом. Например: у нас есть компонент User, для всех пользователей с разными идентификаторами мы должны использовать этот компонент для рендеринга. Для этого можно настроить динамическую маршрутизацию.动态路由匹配本质上就是通过url进行传参

7.1, Введение атрибутов объекта маршрутизации:

Для удобства понимания ниже приведено краткое введение в часто используемые атрибуты объекта маршрутизации, которые можно передать в компонентеthis.$route(нет$router!) для доступа.

$route.pathтип:stringСтрока, соответствующая пути текущего маршрута, всегда разрешается в абсолютный путь, например"/foo/bar".

$route.paramsтип:ObjectОбъект типа "ключ-значение", содержащий динамические фрагменты и фрагменты с полным соответствием. Если параметры маршрута отсутствуют, это пустой объект.

$route.queryтип:ObjectОбъект "ключ-значение", представляющий параметры запроса URL. Например, для пути/foo?user=1, то есть$route.query.user == 1или пустой объект, если параметры запроса отсутствуют.

$route .nameНазвание текущего маршрута, если он есть.Здесь предполагается, что лучше всего давать имя каждому объекту маршрутизации, чтобы потом облегчить программную навигацию, но помните, что имя должно быть уникальным!

$route.hashтип: stringХэш-значение текущего маршрута (с#) или пустая строка, если хеш-значение отсутствует.

$route.fullPathтип: stringАнализируемый URL-адрес, включая полный путь к параметрам запроса и хэш.

$route.matchedтип: Array<RouteRecord>массив, содержащий все вложенные фрагменты пути текущего маршрутазапись маршрутизации. Записи маршрутизацииroutesКопия объекта в массиве конфигурации (также вchildrenмножество).$route.redirectedFromЕсли есть перенаправление, имя маршрута, с которого произошло перенаправление.

7.2 Используйте параметры для настройки:

Например:

routes:[{
	//动态路径参数,以冒号开头
	path:'/user/:id',
	component:User
}]

Таким образом, он настраивается с помощью параметров, например, /user/foo и /user/bar будут сопоставляться с одним и тем же маршрутом.

  • Параметр пути помечен двоеточием ':'.
  • При совпадении маршрута параметр будет установлен наthis.$route.params, можно использовать внутри каждого компонента, например, /user/foo вthis.$route.params.idтолько для фу

Вот официальный пример таблицы, чтобы показать

модель путь совпадения $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 }

Вот еще один немного измененный пример для углубления понимания:

routes:[
	{path:'/user/:shot/foo/:id', component:shotCat}
]

<p>
	<router-link to="/user/shot/foo">/user/shot/foo</router-link>  	<!--无法匹配到对应路由-->	
	<router-link to="/user/shot/cat/foo">/user/shot/cat/foo</router-link>	<!--无法匹配到对应路由-->	
	<router-link to="/user/foo/foo/foo">/user/foo/foo/foo</router-link>	<!--成功匹配,$route.params.shot为foo;$route.params.cat为foo;-->	
	<router-link to="/user/shot/foo/cat">/user/shot/foo/cat</router-link><!--成功匹配,$route.params.shot为shot;$route.params.cat为cat;-->	
</p>
<router-view></router-view>

tips:

  • Иногда один и тот же путь может соответствовать нескольким маршрутам. В этом случае приоритет сопоставления находится в порядке определения маршрута. Тот, кто определяет его первым, имеет наивысший приоритет.
  • Поскольку параметры маршрутизации повторно используются для экземпляров компонентов, например:/user/foo и /user/barПри использовании параметров маршрутизации повторное использованиеUserКомпонент, На этом этапе хуки жизненного цикла компонента больше не будут вызываться. Если вы хотите выполнить некоторые операции инициализации при переключении пути, вы можете использовать следующие два решения:
    • смотреть внутри компонента$routeОбъект:
    const User = {
 template: '...',
 watch: {
   '$route' (to, from) {
     // 对路由变化作出响应...
   }
 }
}
    • Используйте защиту маршрута beforeRouteUpdate из версии 2.2:
    const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
	// react to route changes...
	// don't forget to call next()
  }
}

7.3, настройте параметры через запрос.

В проекте мы можем передавать параметры через упомянутые выше параметры, в то же время мы также можем использовать запрос для передачи параметров. Например:<router-link to="/user?id=foo">foo</router-link>vue-route автоматически инкапсулирует id=foo после ? в this.$route.query.На данный момент значение this.$route.query.id в компоненте равно 'foo'. == кроме как черезrouter-linkизtoAttribute.query также может передавать параметры через упомянутую ниже программную навигацию==

8. Программная навигация

Что такое программная навигация, программная навигация передается внутри компонента vuethis.$routerПолучите доступ к экземпляру маршрутизации и перейдите к другому URL-адресу через this.$router.push для сопоставления маршрута, поэтомуЕго функция заключается в<router-link :to>Это то же самое!Конечно,Предполагается, что вы настроили соответствующий объект маршрутизации в route.

Когда вы обычно используете программную навигацию?Если вы хотите сделать что-то еще перед переходом по маршруту, например, проверить разрешение и т. д., но используйте<router-link>Если это так, он будет прыгать напрямую.На этом этапе вы можете использовать программную навигацию!

8.1, Написание программной навигации

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

//字符串
this.$router.push('home')

//对象
this.$ruter.push({path:'home'})

//命名路由
this.$router.push({name:'user',params:{userId:2333}})

//带查询参数,变成/register?plan=private
this.$router.push({path:'register',query:{plan:'private'}})

Уведомление:==Простите цветное предупреждение==:pathиparamsнельзя использовать одновременно!, иначе параметры будут проигнорированы.Поэтому при использовании объектной записи для передачи параметров параметров либоpathдобавить двоеточие:или "именованный маршрут", как в приведенном выше примере. Передайте параметры через name и params.Однако это не влияет на запрос, и параметры можно передавать с путем или без него.

8.2, метод router.replace

router.replace очень похож на router.push, и пишется то же самое, но фактический эффект отличается: Push добавляет новую запись в историю.А replace — это прямая замена текущей записи истории браузера!

Каково самое непосредственное последствие?Например:

  • Используя метод push, страница 1 переходит на страницу 2, и вы можете использовать возврат браузера, чтобы вернуться на страницу 1.
  • Методом replace страница 1 заменяется страницей 2, вы используете обратную сторону браузера,Вы не можете вернуться на страницу 1 в этот момент, можно вернуться только на предыдущую страницу страницы 1, страницу 0.

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

8.3, метод router.go(n)

Параметр этого метода представляет собой целое число, которое означает, сколько шагов вперед или назад в записи истории. Аналогично window.history.go(n).Это может контролировать количество шагов вперед или назад на странице.

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

Пополнить:На самом деле, без настройки маршрутов через роуты, вы также можете использовать следующий метод прямо в файлеrouter-linkпередайtoВыполнить передачу параметров.оtoБолее подробное использование:МожетОбратитесь к официальной документации API, Использование очень простое, и я не буду повторяться здесь.

routes:[
	{name:'shotCat',path:'/shotCat', component:shotCat}
]

<router-link :to="{ name:'shotCat',params:{paramId:'hello'},query:{queryId:'world'}}">helloWorld</router-link> <!--此时通过name匹配到路由对象shotCat.-->	 
<router-link :to="{ path:'/shotCat',params:{paramId:'hello'},query:{queryId:'world'}}">helloWorld</router-link>  <!--此时通过path匹配到路由对象shotCat.但是!!!!!此时`paramId`并不能添加到`$route.params`里,只有`queryId`成功添加到`$route.query`-->

через дваrouter-linkМожно обнаружить, что этот способ написания совпадает с правилами программной навигации,pathиparamsнельзя использовать одновременно!Поэтому рекомендуется дать имя каждому объекту маршрутизации!**queryКак путь, так и имя могут быть переданы в качестве параметров в обычном режиме. Здесь вы можете пройти через этоОфициальный онлайн-примерВнесите изменения для проверки{{$route.params}}и{{$route.query}}было ли оно успешно доставлено.резюме:

  • 1,<router-link :to="{ }">Эквивалентноthis.$router.psh(). pathиparamsне может существовать одновременно!, если вы хотите передать параметры, вам нужно добавить атрибут имени.queryНе пострадал.
  • 2,<router-link :to="{ }">иthis.$router.psh()Фактический эффект тот же.
    • 2.1 параметры params не отображаются в адресной строке URL.За исключением настройки через маршруты в маршруте.Так пользовательПосле обновления страницы параметр params теряется!
    • 2.2 Параметр запроса может нормально отображаться в адресной строке URL..Он также не будет потерян после обновления страницы.

пройти черезtoХотя можноparams,queryПередайте параметры, но обратите внимание на это времяАдрес страницы не меняется!Так что после того, как вы обновите страницу, параметры исчезнут.

10 вложенных маршрутов и нескольких представлений одного компонента

  • Вложенные маршруты: это родительский маршрут и вложенный дочерний маршрут. URL-адрес /user и после вложения двух дочерних маршрутов это /user/foo и /uer/bar. Он представлен картинкой:

嵌套路由

  • Один компонент с несколькими представлениями: Это означает, что в компоненте есть несколько представлений для отображения, то есть он содержит несколько представлений.<router-view/>

10.1 Вложенная маршрутизация

Прежде чем говорить, мы должны сначала понять одну вещь,Один<router-view/>Соответствующий дисплей является компонентомТаким образом, есть два основных момента для реализации вложенной маршрутизации:

  • Определите подмаршруты в объектах маршрутизации (вложенные подмаршруты)
  • внутри компонента<router-view/>использование.

Эти два момента также соответствуют тому, что я сказал о ментальной подготовке в главе 4.

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

10.1.1 Определение подмаршрутов в объектах маршрутизации

const router = new VueRouter({
  routes: [
    { path: '/user', component: User,name:'user',
	//嵌套路由就写在children配置中,写法和rutes一样.
      children: [
        { path: '', component: UserDefault ,name:'default',
			//children:[{}]   也可以继续添加children嵌套
		},
		//如果/user下没有匹配到其他子路由时,User的<router-view>是什么都不会显示的,如果你想让它显示点什么.可以将path:''.设为空.此时UserDefault就是默认显示的组件.
		
        { path: 'foo', component: UserFoo,name:'foo'},
		//此时path等同于'/user/foo',子路由会继承父路由的路径.但是不能写成path:'/foo'.因为以 / 开头的嵌套路径会被当作根路径,也就是说此时foo成了根路径.而不是user.
		
        { path: 'bar', component: UserBar,name:'bar' }
      ]
    }
  ]
})

10.1.2 Внутренние компоненты<router-view/>использование.

<div id="app">
 <p>
   <router-link to="/user">/user</router-link>
   <router-link to="/user/foo">/user/foo</router-link>
   <router-link to="/user/bar">/user/bar</router-link>
 </p>
 <router-view></router-view> <!--这里展示的是User组件;同样User的<router-view/>也被嵌套在里面-->
</div>

const User = {
 template: `
   <div class="user">
     <h2>User</h2>
     <router-view></router-view> 
   </div>
 `
}
//User的<router-view>里展示的就是子路由foo,bar的组件还有default默认组件

const UserDefault = { template: '<div>default</div>' }
const UserFoo = { template: '<div>foo</div>' }
const UserBar = { template: '<div>bar</div>' }

10.2 Один компонент с несколькими представлениями

Если компонент имеет несколько представлений, чтобы отобразить несколько подкомпонентов, на этот раз вам нужно использоватьименованный видОфициальный онлайн-примерэто здесь, вы можете попробовать изменить его самостоятельно на этой основе. Сразу к моему примеру:

<div id="app">
 <h1>Named Views</h1>
 <p>
   <router-link to="/avenger">复仇者联盟</router-link>
 </p>
 <router-view ></router-view>
 <router-view name="ironMan"></router-view>
 <router-view name="captainAmerica"></router-view>
</div>
<!--这里我们给其中两个视图命名为ironMan和captainAmerica;没有设置name的视图,会获得默认命名为default>

const router = new VueRouter({
  routes: [
    { path: '/avenger', name:'avenger',components: {
        default: stanLee,
        ironMan: ironMan,
        captainAmerica: captainAmerica
      }
	//如果有多个视图需要展示时,以前的component换成components(加上s!!),写成对象形式.左边的ironMan指的就是<router-view>里设置的name="ironMan";右边的则指的是下面的组件ironMan.
    }
  ]
})

const stanLee = { template: '<div>斯坦李</div>' }
const ironMan = { template: '<div>钢铁侠</div>' }
const captainAmerica = { template: '<div>美国队长</div>' }

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

11 редиректов и псевдонимов:

11.1 Конфигурация перенаправления:

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

//从 /a 重定向到 /b
const router = new VueRouter({
	routes:[
		{path:'/a',redirect:'/b'}
	]
})

///从 /a 重定向到 命名为'foo'的路由
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

//甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
	  const { hash, params, query } = to
	  //这里使用了ES6的解构写法,分别对应了to的hash模式,params,query参数.这里解构就不具体说明了.
        if (query.to === 'foo') {
          return { path: '/foo', query: null }
        }
        if (hash === '#baz') {
          return { name: 'baz', hash: '' }
        }
        if (params.id) {
          return '/with-params/:id'
        } else {
          return '/bar'
        }
    }}
  ]
})

11.2 Псевдонимы

Перенаправление заключается в замене пути URL и переходе по маршруту. Псевдоним заключается в том, что маршрут имеет два пути. Оба пути могут переходить на маршрут. Возьмите каштан: Ваше настоящее имя может быть «Чжао Ритянь», но ваше прозвище (псевдоним) может быть «Эр Гоузи», но «Чжао Ритянь» и «Эр Гоузи» относятся к одному и тому же человеку (маршрутизация). Псевдонимы настраиваются в aliases в рутах:

const router = new VueRouter({
//这时,路径'/fxxksky'和'/two-dogs' 都会跳转到A
  routes: [
    { path: '/fxxksky', component: A, alias: '/two-dogs' }
	//当有多个别名时,alias也可以写成数组形式.  alias: ['/two-dogs', 'three-dogs','four-dogs','five-dogs'] 
  ]
})

12 Параметры компонентов маршрута

Для параметров маршрутизации вы можете передать параметры через параметры и запрос, описанные выше. Но два метода передачи параметров, по сути, помещают параметры в URL-адрес и изменяют URL-адрес. Это приведет к увеличению высоты параметров и компонентов. Если я хочу передать параметры, я могу быть более свободным и избавиться от оков url.В это время я могу использовать реквизиты рута для развязки.Улучшить повторное использование компонентов без изменения url.

Ниже приведен пример для пояснения:PS:Официального онлайн-примера для этой части нет. Вы можете заменить предыдущий онлайн-пример кодом примера ниже.

//路由配置:

const Hello = {
  props: ['name'], //使用rute的props传参的时候,对应的组件一定要添加props进行接收,否则根本拿不到传参
  template: '<div>Hello {{ $route.params}}和{{this.name}}</div>'
  //如果this.name有值,那么name已经成功成为组件的属性,传参成功
}

const router = new VueRouter({
mode: 'history',
  routes: [
    { path: '/', component: Hello }, // 没有传参  所以组件什么都拿不到
    { path: '/hello/:name', component: Hello, props: true }, //布尔模式: props 被设置为 true，此时route.params (即此处的name)将会被设置为组件属性。
    { path: '/static', component: Hello, props: { name: 'world' }}, // 对象模式: 此时就和params没什么关系了.此时的name将直接传给Hello组件.注意:此时的props需为静态!
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // 函数模式: 1,这个函数可以默认接受一个参数即当前路由对象.2,这个函数返回的是一个对象.3,在这个函数里你可以将静态值与路由相关值进行处理.
    { path: '/attrs', component: Hello, props: { name: 'attrs' }}
  ]
})

function dynamicPropsFn (route) {
  return {
    name: (new Date().getFullYear() + parseInt(route.params.years)) + '!'
  }
}

new Vue({
  router,
  el: '#app'
})

<!--html部分-->
    <div id="app">
      <h1>Route props</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/hello/you">/hello/you</router-link></li>
        <li><router-link to="/static">/static</router-link></li>
        <li><router-link to="/dynamic/1">/dynamic/1</router-link></li>
        <li><router-link to="/attrs">/attrs</router-link></li>
      </ul>
      <router-view></router-view>
    </div>

13 Ленивая загрузка маршрута

Vue в основном используется для одностраничных приложений.В настоящее время веб-пакет будет упаковывать большое количество файлов, что приведет к загрузке слишком большого количества ресурсов на домашней странице, а время первого экрана будет слишком долгим, что даст пользователям недружественный опыт. Если вы используете ленивую загрузку маршрутизации, загружайте релевантные страницы только тогда, когда ваша маршрутизация скачет.Таким образом, на главной странице загружается меньше вещей, а также сокращается время нахождения в верхней части страницы. Ленивая загрузка vueRouter в основном зависит отАсинхронные компоненты для VueиРазделение кода с помощью Webpack, чтобы легко реализовать ленивую загрузку компонентов маршрутизации. На самом деле, я уже написал пример в главе 5.3, он относительно прост и требует только введения компонента в виде промиса.

routes:[
      path:'/',
      name:'HelloWorld',
      component:resolve=>require(['@/component/HelloWorld'],resolve)
  ]
  //此时HelloWorld组件则不需要在第一步import进来

13.1 Блокировать компоненты в группы

Группируя компоненты в группы, все компоненты маршрута могут быть упакованы в один и тот же асинхронный блок (чанк), а имена динамически загружаемых компонентов можно увидеть в сети f12.Предпосылки:

  • Версия веб-пакета > 2.4
  • Вам нужно добавить chunkFileName под именем файла в выводе в webpack.base.conf.js
output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
}

В настоящее время метод записи при введении компонентов должен использовать именованный фрагмент, специальный синтаксис аннотации для предоставления имени фрагмента.

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

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

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

14.1 Классификация навигационной охраны

  • 1, глобальная защита:: Асинхронное выполнение, каждый переход маршрутизации будет выполняться последовательно.
    • router.beforeEach глобальная передняя защита
    • Глобальная защита разрешения router.beforeResolve (2.5.0+), вызываемая после вызова beforeRouteEnter.
    • router.afterEach глобальный почтовый хук после ввода маршрутаПримечание: next() не поддерживается, может быть записан только в такой форме router.afterEach((to, from) => {});

Каждый сторожевой метод получает три параметра:

  • to: Route: цель, которая вот-вот войдетобъект маршрута

  • from: Route: Объект маршрута, который покидает текущая навигация.

  • next: Function: необходимо вызвать этот метод, чтобыresolveэтот крючок. Эффект исполнения зависитnextПараметры вызова метода.

    • next(): перейти к следующему хуку в конвейере. Если все хуки выполнены, состояние навигацииconfirmed(подтверждено).

    • next(false): Прерывает текущую навигацию. Если URL-адрес браузера изменен (либо вручную пользователем, либо с помощью кнопки «Назад» в браузере), URL-адрес будет сброшен наfromАдрес, соответствующий маршруту.

    • next('/') или next({ path: '/' }): Перейти к другому адресу. Текущая навигация прерывается и создается новая. Вы можете спроситьnextПередавайте объекты произвольного местоположения и разрешайте такие настройки, какreplace: true,name: 'home'такие варианты, как , и все, что используется вrouter-link из to prop или router.pushварианты в .

    • next(error): (2.4.0+) если переданоnextПараметр представляет собойErrorнапример, навигация прекращается и ошибка передается вrouter.onError()Зарегистрированный обратный вызов.

Официальное введение относительно простое, настоящих каштанов нет, и я дам подробное объяснение по каштанам ниже.

//1,可以在main.js 或者在单独的路由配置文件router.js中进行设置
	router.beforeEach((to, from, next) => { 
	...
      next();
    });
	
//2,也可以在组件内部设置
	this.$router.beforeEach((to, from, next) => { 
	...
      next();
    });
	
//3,对函数及next()的详细使用说明
    router.beforeEach((to, from, next) => { 
	//首先to和from 其实是一个路由对象,所以路由对象的属性都是可以获取到的(具体可以查看官方路由对象的api文档).
	//例如:我想获取获取to的完整路径就是to.path.获取to的子路由to.matched[0].
      next();//使用时,千万不能漏写next!!!
	//next()  表示直接进入下一个钩子.
	//next(false)  中断当前导航
	//next('/path路径')或者对象形式next({path:'/path路径'})  跳转到path路由地址
	//next({path:'/shotcat',name:'shotCat',replace:true,query:{logoin:true}...})  这种对象的写法,可以往里面添加很多.router-link 的 to prop 和 router.push 中的选项(具体可以查看api的官方文档)全都是可以添加进去的,再说明下,replace:true表示替换当前路由地址,常用于权限判断后的路由修改.
	//next(error)的用法,(需2.4.0+) 
    }).catch(()=>{
  //跳转失败页面
  next({ path: '/error', replace: true, query: { back: false }})
})
//如果你想跳转报错后,再回调做点其他的可以使用 router.onError()
router.onError(callback => { 
      console.log('出错了!', callback);
    });
  • 2, Эксклюзивная защита маршрутизации:То есть защита, эксклюзивная для объекта маршрутизации.
    • beforeEnter: Маршрут имеет только один хук, настроенный в рутах.
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 使用方法和上面的beforeEach一毛一样
      }
    }
  ]
})
  • 3, охранник в компоненте:Примечание. Этот тип маршрутизации записывается внутри компонента,
    • beforeRouteEnter Перед входом в рут инстанс еще не создан, и жис получить нельзя
    • beforeRouteUpdate (2.2) Когда маршрутизация повторно использует один и тот же компонент
    • beforeRouteLeave покидает текущий маршрут, который можно использовать для сохранения данных, инициализации данных, закрытия таймеров и т. д.

Официальный пример здесь очень подробный, и он прямо цитируется здесь.

//在组件内部进行配置,这里的函数用法也是和beforeEach一毛一样
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

14.2 Полный процесс разрешения навигации

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

导航解析流程

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

15.1 Что такое метаинформация маршрутизации

В одном предложении: информация в метаобъекте конфигурации маршрутизации. Официальные каштаны:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

По каштану видно, что в маршрут добавляется пользовательский метаобъект, и в нем статус requireAuth установлен в true.

15.2 Что он делает

Ответ уже дан от другого официального каштана ниже.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //对matched不了解的建议看官方api文档,或我7.1节的说明
	//数组some方法,如果meta.requiresAuth为ture,则返回true.此时,说明进入该路由前需要判断用户是否已经登录 
    if (!auth.loggedIn()) {   //如果没登录,则跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }  //官方例子的这个小细节很好,通过query将要跳转的路由路径保存下来,待完成登录后,就可以直接获取该路径,直接跳转到登录前要去的路由
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

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

На этом этапе некоторые учащиеся могут сказать, что путь, параметры и запрос, упомянутые выше, могут хранить информацию в качестве маркеров состояния для проверки входа в систему. Действительно, они могут достичь того же эффекта. Если это небольшое количество отдельных проверок, это не проблема их использовать. Но что, если аутентификация при входе требуется для нескольких маршрутов? Путь, параметры и запрос хранят информацию в URL-адресе явно. А несколько путей добавляют к URL-адресу одну и ту же информацию о состоянии. Это делает URL-адрес уже не простым, а также очень некрасиво и красиво. Итак, чтобы передать информацию элегантно и неявно, используйте метаобъект!

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

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

будь осторожен:

  • Позиция прокрутки, контролируемая и запоминаемая здесь, предназначена только для всей страницы компонента и не включает другие полосы прокрутки в вашем компоненте.
  • Режим маршрутизации здесь может быть только историей, потому что он использует функцию pushState(), добавленную историей. Подробности см. в моем описании в главе 6.
const router = new VueRouter({
mode:'history',//这个不能忘,默认是hash模式
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
     // to：要进入的目标路由对象，到哪里去.和导航守卫的beforeEach一样
	 //from：离开的路由对象，哪里来
	 //savedPosition: 点击前进/后退的时候记录值{x:?,y:?}.并且只有通过浏览器的前进后退才会触发.
    // return 期望滚动到哪个的位置 { x: number, y: number }或者是{ selector: string, offset? : { x: number, y: number }},这里selector接收字符串形式的hash,如'#foo',同时你还可以通过offset设置偏移,版本需要大于2.6+
	//举个实例
	if(savePosition) { //如果是浏览器的前进后退就,返回之前保存的位置
      return savePosition;
    }else if(to.hash) {//如果存在hash,就滚动到hash所在位置
      return {selector: to.hash}
    }else{
	  return {x:0,y:0}//否则就滚动到顶部
	}
  }
})
Категории