Изучите vue-router с нуля

JavaScript Vue.js

Введение

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

2. Что такое vue-маршрутизатор

Маршрутизация здесь не относится к аппаратным маршрутизаторам, на которые мы обычно ссылаемся.Маршрут здесь — это менеджер путей SPA (одностраничное приложение).. С точки зрения непрофессионала, vue-router — это система управления путями ссылок WebApp. vue-router — официальный плагин маршрутизации для Vue.js, глубоко интегрированный с vue.js и подходящий для создания одностраничных приложений. Одностраничное приложение Vue основано на маршрутизации и компонентах.Маршрутизация используется для установки путей доступа и сопоставления путей и компонентов. В традиционных страничных приложениях некоторые гиперссылки используются для переключения страниц и переходов между ними. В одностраничном приложении vue-router это переключение между путями, то есть переключение компонентов.Суть модуля маршрутизации заключается в установлении отношения сопоставления между URL-адресом и страницей..

Что касается того, почему мы не можем использовать тег a, это потому, что все одностраничные приложения сделаны с помощью Vue (Когда ваш проект будет готов к упаковке, запуститеnpm run buildПри создании папки dist есть только статические ресурсы и страница index.html.), так что вы пишитеЯрлыки не работают, для управления ими нужно использовать vue-router.

В-третьих, принцип реализации vue-router

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

1. Режим хеширования:

Режим хеширования vue-router по умолчанию — использует хэш URL-адреса для имитации полного URL-адреса, поэтому при изменении URL-адреса страница не будет перезагружаться.решетка (#) — это якорь URL-адреса, представляющий позицию на веб-странице. Если вы просто измените часть после #, браузер прокрутит только до соответствующей позиции и не перезагрузит веб-страницу, то естьХэш отображается в URL-адресе, но не включается в http-запрос и вообще не влияет на серверную часть, поэтому изменение хеша не приведет к перезагрузке страницы.; При этом каждый раз, когда вы меняете часть после #, в историю обращений браузера будет добавляться запись, и вы сможете с помощью кнопки "назад" вернуться на предыдущую позицию; так сказатьРежим хеширования отображает разные данные в указанном месте DOM в соответствии с разными значениями путем изменения значения привязки. Принцип режима хеширования заключается в событии onhashchange (отслеживание изменения значения хеш-функции), которое можно отслеживать на объекте окна..

2. Режим истории:

Так как режим хеширования будет иметь свой собственный # в URL-адресе, если мы не хотим уродливого хэша, мы можем использовать режим маршрутизации истории, просто добавьте «режим:« история »» при настройке правил маршрутизации,Этот режим в полной мере использует новые методы pushState() и replaceState() в интерфейсе истории html5. Эти два метода применяются к стеку записей браузера.На основе текущих возвратов, перенаправлений и переходов они обеспечивают функцию изменения записи истории. Просто при выполнении модификаций, хотя текущий URL меняется, браузер не сразу отправляет запрос на бэкенд.

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Когда вы используете режим истории, URL-адрес похож на обычный URL-адрес, например.yoursite.com/user/id, лучше…Однако, чтобы хорошо играть в этом режиме, ему также нужна поддержка фоновой конфигурации. Поскольку наше приложение является одностраничным клиентским приложением, если фон не настроен должным образом, когда пользователь напрямую обращается к браузеруoursite.com/user/idОн вернет 404, что некрасиво. И что,Вам нужно добавить ресурс-кандидат на стороне сервера, который охватывает все случаи: если URL-адрес не соответствует ни одному из статических ресурсов, он должен возвращать ту же страницу index.html, от которой зависит ваше приложение.

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

Здесь установлено, что если URL-адрес введен неправильно или URL-адрес не соответствует каким-либо статическим ресурсам, он автоматически перейдет на Домашнюю страницу.

3. Используйте модуль маршрутизации для перехода на другую страницу

  • Способ 1: изменить адресную строку напрямую

  • Способ 2: this.$router.push('адрес маршрутизатора')

  • Способ 3:<router-link to="路由地址"></router-link>

4. Как использовать vue-маршрутизатор

1: Скачатьnpm i vue-router -S2: Ввести в main.jsimport VueRouter from 'vue-router'; 3: Установите плагинVue.use(VueRouter); 4: Создайте объект маршрутизации и настройте правила маршрутизацииlet router = new VueRouter({routes:[{path:'/home',component:Home}]}); 5: Передайте его объект маршрутизации экземпляру Vue и добавьте его в параметрыrouter:router6: Оставьте яму в app.vue<router-view></router-view>

Для конкретной реализации, пожалуйста, смотрите следующий код:

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }
    ]
});
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

Наконец, помните в приложении. Превратите «остаться на яму»

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

Пять, передача параметров vue-router

Декларативная навигация<router-link :to="...">и программная навигацияrouter.push(...)Можно передавать оба параметра. В этой статье в основном рассматривается первый метод передачи параметров. Те же правила применимы и к программной навигации.

1. Передайте параметры с именем

Настройте атрибут имени в файле маршрутизации src/router/index.js.

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

Используется в шаблоне (src/App.vue)$route.nameполучить, например:<p>{{ $route.name}}</p>

2 проход<router-link>Параметр to в теге

Основной синтаксис этого метода передачи параметров:

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

Например, сначала в файле src/App.vue

<router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi页面1</router-link>

Затем дайте имя маршруту, настроенному hi1, в файле src/router/index.js, который называется hi1.

{path:'/hi1',name:'hi1',component:Hi1}

Наконец, в шаблоне (src/components/Hi1.vue) используйте$route.params.usernameполучать.

{{$route.params.username}}-{{$route.params.id}}

3 Используйте URL-адрес для передачи параметров ---- задайте параметры в виде двоеточий в файле конфигурации.

Настраиваем маршрутизацию в файле /src/router/index.js

{
    path:'/params/:newsId/:newsTitle',
    component:Params
}

Параметры, которые нам нужно передать, это идентификатор новости (newsId) и заголовок новости (newsTitle), поэтому мы указываем эти два значения в файле конфигурации маршрутизации.

Создайте наш компонент params.vue в каталоге src/components, который также можно назвать страницей. Мы выводим идентификатор новости и заголовок новости, переданный URL-адресом на странице.

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

Добавьте наш файл App.vue в наш<router-view>Этикетка. В настоящее время мы можем напрямую использовать традиционные значения URL.

<router-link to="/params/198/jspang website is very good">params</router-link>

4. Используйте путь для сопоставления маршрутов, а затем передайте параметры через запрос

<router-link :to="{ name:'Query',query: { queryId:  status }}" >
     router-link跳转Query
</router-link>

Соответствующая конфигурация маршрутизации:

   {
     path: '/query',
     name: 'Query',
     component: Query
   }

Таким образом, мы можем получить параметры:

this.$route.query.queryId

Шесть, подмаршрут конфигурации vue-router (вторичный маршрут)

Интерфейс приложения в реальной жизни обычно состоит из нескольких слоев вложенных компонентов. Точно так же каждый сегмент динамического пути в URL-адресе также соответствует каждому уровню вложенных компонентов в соответствии с определенной структурой, например:

Как добиться эффекта следующего рисунка (страница H1 и страница H2 вложены в главную страницу)?

1. Первое использование<router-link>Вкладка добавляет две новые навигационные ссылки

<router-link :to="{name:'HelloWorld'}">主页</router-link>
<router-link :to="{name:'H1'}">H1页面</router-link>
<router-link :to="{name:'H2'}">H2页面</router-link>

2. Присоединяйтесь к HelloWorld.vue<router-view>тег, который обеспечивает позицию вставки для дочернего шаблона

 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

3. Создайте два новых шаблона компонентов H1.vue и H2.vue в каталоге компонентов. Содержимое этих двух файлов похоже. Ниже приведено содержимое страницы H1.vue:

 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'I am H1 page,Welcome to H1'
      }
    }
  }
</script>
  1. Измените код router/index.js.Подмаршрут записывается путем добавления дочернего поля в исходную конфигурацию маршрутизации.
   routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [{path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
        {path: '/h2', name: 'H2', component: H2}
      ]
    }
  ]

Семь, одностраничная мультимаршрутная операция

На одной странице у нас более двух<router-view>Area, мы управляем содержимым этих областей, настроив js-файл маршрута

1.Файл App.vue, в<router-view>Две новые строки написаны ниже<router-view>теги и добавлены некоторые стили CSS

<template>
  <div id="app">
    <img src="./assets/logo.png">
       <router-link :to="{name:'HelloWorld'}"><h1>H1</h1></router-link>
       <router-link :to="{name:'H1'}"><h1>H2</h1></router-link>
    <router-view></router-view>
    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right" style="float:right;width:50%;background-color:yellowgreen;height:300px;"/>
  </div>
</template>

2. Эти три области необходимо настроить в маршрутизации, настройка в основном выполняется в поле компонентов.

export default new Router({
    routes: [
      {
        path: '/',
        name: 'HelloWorld',
        components: {default: HelloWorld,
          left:H1,//显示H1组件内容'I am H1 page,Welcome to H1'
          right:H2//显示H2组件内容'I am H2 page,Welcome to H2'
        }
      },
      {
        path: '/h1',
        name: 'H1',
        components: {default: HelloWorld,
          left:H2,//显示H2组件内容
          right:H1//显示H1组件内容
        }
      }
    ]
  })

В приведенном выше коде мы написали два пути, один по умолчанию «/», а другой «/ Привет». В компонентах под двумя путями мы определяем отображаемое содержимое для трех областей. Последняя страница выглядит следующим образом:

Восемь.$routeа также$routerразница

Сначала мы распечатываем два файла console.log:

$route — это «объект информации о маршрутизации», включая путь, параметры, хэш, запрос, полный путь, сопоставление, имя и другие параметры информации о маршрутизации.

①$route.pathСтрока, соответствующая пути текущего маршрута, всегда разрешается до абсолютного пути, такого как «/ order».

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

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

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

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

⑥$route.matchedМассив, содержащий объекты параметров конфигурации, соответствующие всем фрагментам, содержащимся в текущем совпавшем пути.

⑦$route.nameтекущее имя пути

$router — это объект «экземпляр маршрутизатора», то есть экземпляр, созданный с помощью нового VueRouter, включая методы перехода маршрутизации, функции подключения и т. д.

Общие методы перехода $router:

<button @click="goToMenu" class="btn btn-success">Let's order！</button>
.....
<script>
  export default{
    methods:{
      goToMenu(){
        this.$router.go(-1)//跳转到上一次浏览的页面
        this.$router.replace('/menu')//指定跳转的地址
        this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
        this.$router.push('/menu')//通过push进行跳转
        this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下
      }
    }
  }
</script>

$router.pushа также$router.replaceразница:

  • Прыжок с использованием метода push добавит новую запись в стек истории, и когда мы нажмем кнопку браузера назад, мы сможем увидеть предыдущую страницу.
  • Использование метода replace не добавит новую запись в историю, а заменит текущую запись истории, то есть после замены веб-страницы, на которую происходит переход, кнопка «назад» не может просмотреть предыдущую страницу.

9. Как настроить страницу 404

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

  1. Настройте наш файл конфигурации маршрутизации (/src/router/index.js)
{
   path:'*',
   component:Error
}

Путь: '*' здесь означает, что если входной адрес не совпадает, содержимое файла Error.vue отображается автоматически.

  1. Создайте новый файл Error.vue в папке /src/components/. Просто введите что-нибудь о странице ошибки.
<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

На этом этапе, когда мы произвольно вводим неправильный адрес, он автоматически переходит на страницу 404.

Справочная статья

Категории