предисловие
В предыдущем блоге компонент , который обменивается данными Vue отмечает исследование (девять) VUE-консоли в содержании, мы узнаем компоненты связи релевантное содержание и некоторые незначительные упражнения компоненты связи, я считаю , что мы освоили сборку в связи VUE-консоли и этот блог будет считать вас на следующий уровень, скажем правду о маршруте знания , которые я упомянул , что использование WebStorm сборки проекта VUE-кли примеры в конце этого блога немного знаний о маршрутах, но в то время я только сделал небольшой случай, и этот блог будет подробно объяснить вю маршрутизации знаний, то с выражением!
Цели главы
- Изучает краткое введение Вьет маршрутизатор
- Научитесь участие способ массовой вю маршрутизации
- Подробнее VUE маршрутизации передачи параметров боя
Вью маршрутизатор Введение
Вью маршрутизатор плагин Vue ядро, является Vue.js официальным менеджером маршрута. Она Vue.js и ядро глубина интеграции, так что для построения приложений одностраничного ветра. Вьет применение одной страницы на основе и маршрутизации компонентов, маршрутизации пути для настройки доступа и карт пути и компонентов вместе. Традиционное применение страницы с гиперссылками осуществлять переключение страниц и прыгать. Вью маршрутизатор в приложениях одной страницы, он переключается между траекторией, т.е. узел переключателя. Возможности включают в себя:
- Уплотненная маршрутизация / представление таблицы
- Модульный, компонент на основе конфигурации маршрутизации
- Параметры маршрутизации, запросы, подстановочные
- На основе воздействия вида переходного Vue.js переходной системы
- Мелкозернистый управления навигацией
- класс CSS с автоматической активации ссылки
- HTML5 исторические модели или режим хеширования, автоматическое понижение в IE9
- Поскольку определение поведения прокрутки бар
ресурсы
Китайская Помощь: https://router.vuejs.org/zh/
Английский Помощь: https://router.vuejs.org/
Git Источник: https://github.com/vuejs/vue-router
вю маршрутизатор Есть три важных понятия, маршрут, маршруты, маршрутизатор, то мы знакомимся один на один.
- Маршрут, который является адресом маршрута, от имени визита.
- маршруты представляет собой набор маршрутов, маршрут объединяются, чтобы сформировать массив.
- Маршрутизатор представляет собой механизм, эквивалентный менеджеру, чтобы управлять маршрутизацией, например: Предположим, мы нажимаем на кнопку потребностей в данных запроса, как это сделать? Тогда работа на маршрутизаторе, маршруты его надо найти, чтобы найти маршрутизации соответствующих данных запроса, а затем возвращаются массив на страницу.
- маршрут клиента, на самом деле, показать элементы DOM и скрыты. Когда содержимое домашней страницы отображается, когда содержание обо всех скрытых и наоборот. Клиент маршрутизации реализован двумя способами: на основе хэш на основе истории html5 API.
Далее мы используем для достижения VUE-маршрутизатора два способов, с помощью этих двух методов используются веб-версии ви-маршрутизатор и вя-кли версий вю-маршрутизатор
веб-версия
Скачать / CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com на основе НПМ предоставляет ссылки CDN. Выше ссылка всегда будет указывать на последнюю версию выпуска НПМ. Вы можете также указать номер версии, например, Tag или https://unpkg.com/[email protected]/dist/vue-router.js.
NPM
Package Manager устанавливается с помощью nodejs
НПМ установки шоковой-маршрутизатор
Если вы используете его в модульном проекте, он должен пройти Vue.use () явно установлена функция маршрутизации
вид Импорт из «Вид»
импорт VueRouter из «ви-маршрутизатора»
Vue.use (VueRouter)
Создать приложение одну страницу с Vue.js + Вью маршрутизатор, это очень просто. Использование Vue.js, мы смогли создавать приложения путем объединения компонентов, если вы хотите добавить Vue маршрутизатор прийти, мы должны сделать, компонент (компоненты) отображается на маршрут (маршруты), а затем сказал, где делают Vue Router они
<! DOCTYPE HTML > < HTML Ланг = "EN" > < голова > < Meta кодировка = "UTF-8" > < название > Веб - версия VUE-маршрутизатор </ название > </ голова > < тело > < DIV Вышеупомянутый ид = " App " > < h1 из > {{MSG}} </ h1 из > <! - с помощью маршрутизатора-ссылку сборки для навигации -> <! - атрибут , чтобы указать ссылку путем пропускания -> <!- Router-Link сборки в тег рендеринга по умолчанию -> < Router-Link к = "/ Foo" > Foo </ Router-Link > < Router-Link к = "/ бар" > Bar </ Router-Link > <! - Маршрутизация на выходе -> <! - Маршрут соответствует чтобы сделать здесь -> < Router-View > </ Router-View > </ DIV > < Script Пульт SRC = "https://unpkg.com/vue/dist/vue.js" > </ Сценарий > < Script Пульт SRC = «HTTPS: // unpkg.ком / вю-маршрутизатор / расстояние / вю-router.js» > </ скрипт> < Сценарий > // 1. Узел определяется Const Foo = {Шаблон: ' <h1 из> компонент , который Foo </ h1 из> ' } бар Const = {Шаблон: ' <h1> из бара сборки , который </ h1 из> ' } // 2. определенных маршрутов константных маршрутов = [ { Путь: ' / Foo ' , компонент: Foo, имя: Foo, }, { Путь: ' / бар ' , компонент: бар, Название: бар } ] // 3. Определить маршрутизатор константного маршрутизатор = новый новый VueRouter ({ маршруты // эквивалентные маршруты: маршруты }) // 4. Создать и смонтировать экземпляр корневого Const ВМ = новый новый Vue ({ EL: ' #app ' , // монтирования элементов данных: { сообщ: ' Интернет - версия Router-VUE ' }, Маршрутизатор: маршрутизатор }) </ Скрипт > </ тело > </ HTML >
Результаты:
Мы можем видеть, простой переключатель маршрутизации был достигнут, но наше будущее развитие редко используется таким образом, как новичок или необходимость объяснять
Анализ Шаг:
- Js введены и установлены элементы
- Определение компоненты определение маршруты и управлять каждый маршрутом, маршрут может соответствовать компоненте, например, в примере / Foo Foo соответствует сборке / бар, соответствующей строке сборки
- Определить маршрутизатор, для запроса информации обработки, соответствующей каждый маршрут
Примечание: <маршрутизатор просмотр> </ маршрутизатор вид> Этот тег является особенно важным, если не метка вей-маршрутизатор не сможет.
вя-кли версия
Тогда я возьму тебя на использование вю-кли версии вю-маршрутизатор, который является обычной практикой в развитых позже
Установка:
НПМ установки шоковой-маршрутизатор
пряжа добавить вю-маршрутизатор
Оба метода могут быть произвольно выбрать один
Если во время строительства вю-кли, спрашивая «nstall вю-маршрутизатор» (если он установлен вю-маршрутизатор), выберите «Y», здесь не повторить установку VUE-маршрутизатор. Используйте WebStorm создать VUE-кли проект решил использовать маршрутизатор:
(1) / SRC / компоненты / test03 новые четыре компонента, а именно IndexComponent.vue, HomeComponent.vue, DefaultComponent.vue, AboutComponent.vue, новая структура каталогов выглядит следующим образом:
(2) записать соответствующие компоненты соответствующего кода
IndexComponent.vue
<Шаблон>
<DIV>
<H1> {{MSG}} </ h1>
</ DIV>
</ Шаблон>
<скрипт>
экспорта по умолчанию {
имя: "IndexComponent" ,
данные(){
возвращение {
MSG: «Это компонент индекса»
}
}
}
</ Скрипт>
<Стиль области видимости>
</ Стиль>
HomeComponent.vue
<Шаблон>
<DIV>
<H1> {{MSG}} </ h1>
</ DIV>
</ Шаблон>
<скрипт>
экспорта по умолчанию {
имя: "HomeComponent" ,
данные(){
возвращение {
msg:'这是home组件'
}
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
AboutComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "AboutComponent",
data(){
return{
msg:'这是about组件'
}
}
}
</script>
<style scoped>
h1{
color: green;
}
</style>
DefaultComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "DefaultComponent",
data(){
return{
msg:'这是default组件'
}
}
}
</script>
<style scoped>
h1{
color: pink;
}
</style>
(3)自定义router并在main.js注册
其实我们可以自定义router,自定义的router和原来的router都差不多，我们/src/router新建一个test.js并编写对应的代码
test.js
import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/test03/IndexComponent' import Home from '@/components/test03/HomeComponent' import Default from '@/components/test03/DefaultComponent' import About from '@/components/test03/AboutComponent' Vue.use(Router) export default new Router({ routes:[ { path:'/', component:Index, name:Index }, { path:'/home', component:Home, name: Home }, { path:'/about', component:About, name:About }, { path:'/default', component:Default, name:Default } ] })
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'
// import router from './router' //这个是最开始的路由
import router from './router/test' //修改原来的路由，换成自己定义的路由 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {}, template: '' })
修改之后IndexComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/default">Default</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "IndexComponent",
data(){
return{
msg:'这是index组件'
}
}
}
</script>
<style scoped>
</style>
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_01</title> </head> <body> <div id="app"> <!--对应的组件内容渲染到router-view中--> <router-view></router-view> </div> <!-- built files will be auto injected --> </body> </html>
(4)测试结果
vue-router两种方式的使用我已经讲解完成了，写得如此详细，想必大家都可以看得懂。
路由模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载
http://localhost:8080/#/home
如果不想要很hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({ mode: 'history', routes: [...] }
当使用 history 模式时，URL 就像正常的 url
http://localhost:8080/home
test.js
import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/test03/IndexComponent' import Home from '@/components/test03/HomeComponent' import Default from '@/components/test03/DefaultComponent' import About from '@/components/test03/AboutComponent' Vue.use(Router) export default new Router({ mode:'history', routes:[ { path:'/', component:Index, name:Index }, { path:'/home', component:Home, name: Home }, { path:'/about', component:About, name:About }, { path:'/default', component:Default, name:Default } ] })
结果：
不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问 http://site.com/user/id 就会返回 404，详细请参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html
vue路由的传参方式
vue路由传参实战