Vue от сладкого к белой коже Серия Gangster (семь) Vue Router

Vue.js
Vue от сладкого к белой коже Серия Gangster (семь) Vue Router

🎉 Vue создает крупномасштабные одностраничные приложения для электронной коммерции с открытым исходным кодом!Нажмите на меня, чтобы увидеть исходный код 🚀🚀

阅读时间预估:6分钟

Что такое Vue Router?

официальный портал

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

Во-первых, интегрированный Vue Router

  • 1. Если установлен Vue Scaffolding CLI3, будет возможность установить Vue Router при создании проекта. Выбор пространства будет установить маршрутизатор Vue по умолчанию.

  • 2. Если он не устанавливается автоматически при создании проекта, его необходимо установить вручную.

npm i vue-router --save
  • 3. После установки vue-router лучше всего создать router.js в файле src, чтобы специально управлять структурой маршрутизации всего проекта.

2. Использование маршрутизатора Vue

1. Просто создайте маршрут, который обращается к адресу через ввод браузера.

  • 1.srcсоздать каталогrouter.jsфайл, а затем создайте массив маршрутов в файле и экспортируйте его, обязательно обратите внимание, что создание массива маршрутовroutesвместоroutersОй!!
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    // 构建路由数组
    routes: [{
       
    }]
})
  • 2. Вmain.jsrouter.js 
// 引入router.js
import router from 'router.js'
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

Цели: маршрутизацияlocalhost:8080/#/homeПерейти к интерфейсу компонента Home

  • 3. Создайте компонент Home.vue, Встроить в router.jsroutesКонфигурация
import Vue from 'vue'
import Router from 'vue-router'

// 引入views
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
    routes: [{
        path: '/home',
        name: 'home',
        component: Home
    }]
})
  • 4. ДайтеHome组件<router-view></router-view>, этот шаг очень важен!Если выхода нет, то он не будет отображаться.

существуетApp.vueсередина

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

На данный момент простая конфигурация маршрутизации идеально настроена, и ввод в браузереlocalhost:8080/#/homeВы можете получить к нему доступ! Если есть несколько компонентов, которым необходимо настроить маршрутизацию, их можноrouter.jsв конфигурации.

импортировать картинки

2.router-link

проиллюстрировать:router-linkНа самом деле инкапсулированныйaЭтикетка

<router-link to="/home">Home</router-link>

3. Vue-маршрутизатор настраивает подпункты

Примечание. При доступе к вторичным или третичным страницам необходимо настроить подмаршруты.

App.vue

<template>
  <div id="app">
    <p>导航 ：
      <router-link to="/">首页</router-link> |
      <router-link to="/home">Home页面</router-link> |
      <router-link to="/home/about">-About界面</router-link> |
      <router-link to="/home/me">-Me页面</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

Настройте дочерний маршрут дома в router.js

{path: '/home',
component: Home,
children: [
           {path: 'about',component: About},
           {path: 'me',component: Me}]
}

будь осторожен:существуетHome.vueДля того, чтобы добавить выход<router-view></router-view>

Как vue-router передает параметры

1. Использовать$routeизparams

  • пройти через$route.namenameЭтот параметр
  • определить маршрутыpathПара ключа значения
  routes: [{
        path: '/home/:name/:age/:height',
        name: 'home',
        component: Home
    }]

Тип в браузереlocalhost:8080/#/home/name=james/age=26/height=180

  • существуетApp.vueпрошедшийthis.$route.paramsчтобы получить динамическое значение

2.$routeизqueryдинамически передавать параметры

$route.paramsполучить только похожиеlocalhost:8080/#/home/name=james/age=26/height=180Параметр передан с адреса, если оноlocalhost:8080/#/home/name=james/age=26/height=180?sex=男пояс?, только через$route.queryспособ получить значение

性别{{this.$route.query.sex}}

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

let fun = ({parms,query}=>{
return {
    age:param.age,
    sex:param.sex,
    height:query.height,
}
})
// 通过props传值
{path:'/home/:sex?height',name:'mine',component:Mine,props:fun}

// 定义接受的参数
props:['name','sex','height']

//直接取值
{{name}}
{{sex}}
{{height}}

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

Ключевой код:router.js中

const router = new VueRouter({.....})
router.beforeEach((to,from,next)=>{
    if (to.path !== 'login') { //验证是否登录
        if(window.isLogin) {
            next();
        } else {  //没有登录
            next('/login?redirect='+to.path);
        }
    } else { //不需要验证
        next();
    }
    next();
})

3. Частичная защита

Маршруты, которые управляют только одним компонентом, находятся вroutesМассив как контроль, и глобальные потребности какbeforeEach

4. Жизненный цикл

  • beforeRouteEnterпозвоните перед входом
  • beforeRouteUpdateПараметры маршрутизации изменены
  • beforeRouterLeaveдо того, как маршрут уйдет

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

Загрузка при использовании для повышения производительности

1. Как использовать ленивую погрузку:

Изменение способа введения компонентов:

предыдущим

import About from './views/About'

В

const About = ()=> import('./views/About')

Это упрощает реализацию ленивой загрузки маршрутов!

Связанный API

  • this.$router.push(path): эквивалентно щелчку по ссылке маршрутизации (вы можете вернуться к текущему интерфейсу маршрутизации)

  • Маршруты по запросу записи (Return) :. Это $ Router.back ()

  • ЭТО.$router.go(-1): Запрос (возврат) Предыдущая запись маршрута

  • this.$router.go(1): Запрос следующего маршрута записи

Разница между $router и $route

  • $router

  • $route

Я надеюсь, что мой обмен может быть полезен для вас, как вдохновить вас и подбодрить меня с высочайшей любезностью программистов 💓 комментарии и пересылка, ваше подтверждение является самой большой движущей силой для меня, чтобы двигаться вперед!

Отсканируйте QR-код ниже и ответьтеУчитьВы можете получить новейшие учебные материалы по интерфейсу бесплатно, и я надеюсь, что мы будем расти и продвигаться вместе на пути к продвинутому интерфейсу!

Категории