Vue-Router-Projektpraxis (ausführliches Tutorial)

vue-router ist die offizielle Routing-Bibliothek von Vue.js. In diesem Artikel wird hauptsächlich die praktische Zusammenfassung des Vue-Router-Projekts vorgestellt.

Lassen Sie uns heute über das Vue-Projekt sprechen {vue,vue-router,component } vue-router, einer der drei großen Generäle. Als eine unserer wichtigen Methoden zur Front-End- und Back-End-Trennung hilft uns der Router dabei, Seitensprünge zwischen SPA-Anwendungen durchzuführen.

Und mit Bibliotheken von Drittanbietern wie axios können wir Interceptor-Funktionen implementieren, die mit der Hintergrundschnittstelle arbeiten.

Für ein kleines Projekt reicht es aus, dass der Router-Ordner eine router.js enthält.

Wenn wir jedoch viele Seiten haben, müssen wir sie in zwei Dateien aufteilen : Einer definiert unsere Routen und Komponenten, der andere instanziiert die Komponenten und stellt die Route der Vue-Instanz bereit.

Ich werde nicht auf die grundlegende Verwendung eingehen. Sie können die offizielle Website von vue-router überprüfen. Wenn Sie sie sorgfältig lesen, wird es definitiv keine Probleme bei der grundlegenden Verwendung geben.

1. Warum funktioniert meine Route nicht

Ein sehr wichtiger Punkt hier ist, wann wir eine Instanz von VueRouter erstellen liegt ein Problem mit den übergebenen Parametern vor.

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6语法）相当于 routes: routes
})
new Vue({
 router
}).$mount('#app')

Wenn es sich bei dem, was Sie hier einführen, nicht um Routen handelt, müssen Sie es wie folgt schreiben.

import vRoutes from '@/router/router'
const router = new VueRouter({
 routes :vRoutes 
})
new Vue({
 router
}).$mount('#app')

2. Implementieren Sie Lazy Loading von Komponenten basierend auf Webpack im Routing

Für unsere Vue-Projekte verwenden wir grundsätzlich Webpack zum Verpacken Ja, Wenn kein verzögertes Laden erfolgt, sind die gepackten Dateien ungewöhnlich groß, was zu einem weißen Bildschirm auf der Startseite und schwerwiegenden Verzögerungen führt, was der Benutzererfahrung nicht zuträglich ist. Durch verzögertes Laden kann die Seite und das Webpack-Paket unterschiedlich aufgeteilt werden Komponenten in viele kleine JS-Dateien. Bei Bedarf asynchron laden, um das Benutzererlebnis zu optimieren. Mit anderen Worten: Nur ein oder zwei von 100 Benutzern betreten möglicherweise einige Seiten. Warum also Traffic dafür ausgeben?

import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
 path: '/',
 component: App,
 children: [
  {
    path: '/index',
    name:'index',
    component: index
  }]
}]

Wenn eine Komponente verschachtelte Routen enthält, können wir die beiden Routen auch in einen js-Chunk packen.

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')
const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3. Router-Modi

Für Browser ist unser Router in zwei Modi unterteilt.

1.Hash-Modus (Standard)

Gemäß der Grundstruktur einer URI wird der Hash-Modus in einem Basis-URI-Fragment verarbeitet. Wenn wir SPA beiseite lassen, besteht das häufigere Anwendungsszenario darin, dass wir beim Erstellen eines PC-Einkaufszentrums Tab-Wechsel wie Produktdetails, Kommentare und Produktparameter vornehmen. Wir können das Tag „a“ mit der ID verwenden und „a“ hinzufügen wenig Bewegung. Die Spezialeffekte sind sehr gut.

Dies ist auch die vom Router verwendete Standard-Routing-Methode. Diese Methode hat jedoch einen Nachteil: Wenn wir eine Verbindung zur Zahlung eines Drittanbieters herstellen, übergeben wir eine URL an die Zahlung eines Drittanbieters als Rückrufadresse, aber nach Abschluss der Zahlung werden einige Zahlungen eines Drittanbieters an unsere weitergeleitet # Als Abfangsymbol bleibt nur der URL-Inhalt vor dem ersten # Symbol erhalten und die entsprechenden Rückrufparameter werden später hinzugefügt. Daher kann nach Abschluss der Zahlung nicht zur entsprechenden Zahlungsseite gesprungen werden

Eingehende URL:

http://xx.xx.com/#/pay/123

Adresse nach Rückruf:

http://xx.xx.com/pay/123?data=xxxxx%xxxx

2.Verlaufsmodus

Es gibt auch einen Verlaufsmodus. Es verwendet den History.pushState von h5, um den URL-Sprung abzuschließen. Der Vorteil dieser Methode zur Verarbeitung von Sprüngen besteht darin, dass sich die URL nicht von der URL unterscheidet, die wir normalerweise sehen. Im Vergleich zum Hash-Modus gibt es kein #. Bei Verwendung des Verlaufsmodus müssen wir jedoch auch eine entsprechende Verarbeitung im Hintergrund durchführen, denn wenn wir direkt auf eine Adresse wie http://www.xxxx.com/user/id zugreifen und das Backend nicht konfiguriert ist, wird die Backend wird Der Client gibt eine 404-Seite zurück.

4.router-link ist in der Schleife this.

Die Sprungkomponente, die verwendet werden muss. Es ersetzt das, was das Tag tun muss, und hilft uns dabei, noch viel mehr zu tun.

Ob es sich um den H5-Verlaufsmodus oder den Hash-Modus handelt, das Leistungsverhalten ist konsistent. Wenn Sie also den Routing-Modus wechseln oder ein Downgrade auf die Verwendung des Hash-Modus in IE9 durchführen möchten, sind keine Änderungen erforderlich.

Im HTML5-Verlaufsmodus schützt Router-Link das Klickereignis, sodass der Browser die Seite nicht neu lädt.

Wenn Sie die Basisoption im HTML5-Verlaufsmodus verwenden, müssen nicht alle to-Attribute geschrieben werden (Basispfad).

Aber wenn wir Router-Link in einer V-for-Schleife verwenden, müssen wir im Allgemeinen die Werte in der Schleife erhalten, die über die definierte item.xxx abgerufen werden können. Wenn wir einen Wert benötigen, den wir in Daten definiert haben, erhalten wir ihn dann über this.foo? Oder sollte ich es über foo abrufen? Oder ist es in Ordnung?

Hier können wir es nicht über this.foo erreichen, da dies hier nicht mehr auf die Instanz von vue verweist, sondern auf [Objektfenster]. Wenn Sie also this.foo verwenden, um es abzurufen, ist es tatsächlich undefiniert.

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
   //含有固定的值
  <p>{{this.foo}}</p>
  <p>{{foo}}</p>
 </router-link>
data(){
  return {
    foo:&#39;bar&#39;,
  } 
}

4. Vue-Router mit Axios verwenden

初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。

最直观的一点就是，通过用户的token来判断用户是否登录？

router.beforeEach((to, from, next) => {
 const NOW = new Date().getTime();
 if (to.matched.some(r => r.meta.requireAuth)) {
  if(NOW > store.state.deadLine){
   store.commit('CLEAR_USERTOKEN')
  }
  if (store.state.message.login === true) {
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath}
   })
  }
 }
 else {
  next();
 }
})

上面的代码中，我们通过vue-router中的全局守卫，在导航触发的时候大致做了如下几件事：

（1）判断导航的页面是否需要登录

（2）超过登录持久期限，清除持久化的登录用户token

（3）没有超过登录期限，判断是否登录状态

（4）没登录，重定向到登录页面

但是，仅仅这样是不够的。因为用户直接不正常注销而直接后台运行网页是很正常的事情，这就导致虽然token是存在的，但是对于后台而言，这个token是无效的，过期的了。所以，我们需要axios配合后台给出的状态码来完善我们的拦截器。

import router from '@/router/routes'
axios.interceptors.response.use(
 success => {
  switch (success .code) {
   case -100:
    router.replace({
     path: 'login',
     query: {redirect: router.currentRoute.fullPath}
    })
    console.warn('注意,登录已过期!')
    break;
  }
  return success;
 },
 error => {
   switch (error.code) {
    case 404:
     console.warn('请求地址有误或者参数错误!')
    break;
   }
  return Promise.reject(error.response.data)
 });

 通过后端给到的登录过期状态码，这里以-100为例，我们可以用axios的响应拦截器实现，当我们的token过期的时候，我们将页面重定向到登录页面去。

 5.巧用replace替换push

在项目中，我有的同事就是一直this.$router.push(...)，从开始push到结尾。

碰到有的页面，比如说，在选择地址的时候需要知道用户当前所在的城市，如果没有的话，就是重定向到城市列表页面去手动选取。选择完成以后再回到选择地址的页面，如果一直使用push的话，点击选择地址的后退时，就会回退到城市列表页。然后造成页面间的死循环。

这里如果使用replace来操作就没有什么问题了，问题就是我们不应该让城市列表页出现在我们的浏览历史里面。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javascript中如何实现填充默认头像

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

Das obige ist der detaillierte Inhalt vonVue-Router-Projektpraxis (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!