vue-router プロジェクトの実践 (詳細なチュートリアル)

vue-router は Vue.js の公式ルーティング ライブラリです。この記事では主に vue-router プロジェクトの実践的な概要を紹介します。必要な方は参考にしてください。

今日は 3 つの偉大な将軍の 1 つである vue について話しましょう。 vue プロジェクト {vue,vue-router,component} -ルーター。フロントエンドとバックエンドの分離に関する重要なプラクティスの 1 つとして、ルーターは SPA アプリケーション間のページ ジャンプを完了するのに役立ちます。

そして、axios のようなサードパーティ ライブラリを使用すると、バックグラウンド インターフェイスで動作するインターセプター関数を実装できます。

小さなプロジェクトの場合、router フォルダーに router.js が含まれていれば十分です

ただし、ページが多い場合は、定義、ルートとコンポーネント、別のインスタンス化コンポーネント、マウントの 2 つのファイルを分離する必要があります。 vue のインスタンスへのルート。

基本的な使い方については詳しく説明しませんので、vue-router の公式 Web サイトをよく読んでいただければ、基本的な使い方は問題ありません。

1. 私のルートはなぜ機能しないのですか?

ここで非常に重要な点は、VueRouter のインスタンスを構築するときに渡されるパラメーターの問題です。

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

ここで紹介するものがルートではない場合は、次のように記述する必要があります。

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

2. ルーティングで webpack に基づいたコンポーネントの遅延ロードを実装します

vue プロジェクトでは、基本的にパッケージ化に webpack を使用します。遅延ロードがない場合、パッケージ化されたファイルが異常に大きくなります。ホームページに白い画面が表示され、重大な遅延が発生し、ユーザー エクスペリエンスが低下します。遅延読み込みを使用するとページが分割され、webpack ではさまざまなコンポーネントが多数の小さな js ファイルにパッケージ化されます。ユーザー エクスペリエンスを最適化するために必要な場合は、非同期で読み込みます。つまり、一部のページにアクセスできるユーザーは 100 人中 1 人か 2 人だけなので、そこにトラフィックを費やす必要はありません。

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
  }]
}]

コンポーネントにネストされたルートが含まれる場合、2 つのルートを js チャンクにパッケージ化することもできます。

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

3. ルーターモード

ブラウザの場合、ルーターは 2 つのモードに分かれています。

1.hash モード (デフォルト)

URI の基本構造に従って、ハッシュ モードは基本 URI フラグメントで処理されます。 SPA は別として、より一般的なアプリケーション シナリオは、PC モールを構築するときに、商品詳細、コメント、商品パラメータなどのタブ切り替えが発生することです。ID を含む a タグを使用して、動きは少ないですが、特殊効果は非常に優れています。

これは、ルーターによってデフォルトで使用されるルーティング方法でもあります。ただし、この方法には欠点があります。つまり、サードパーティの支払いに接続するときに、サードパーティの支払いへの URL をコールバック アドレスとして渡しますが、支払いが完了すると、一部のサードパーティの支払いによって、 # インターセプト シンボルとして、最初の # シンボルの前の URL コンテンツのみが保持され、対応するコールバック パラメーターは後で追加されます。そのため、支払い完了後に該当の支払いページにジャンプすることができなくなります

受信URL:

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

コールバック後のアドレス:

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

2. 履歴モード

履歴モードもあります。 h5 のhistory.pushState を使用して URL ジャンプを完了します。このメソッドを使用してジャンプを処理する利点は、URL が通常見られるものと変わらないことです。ハッシュモードと比較すると#がありません。ただし、履歴モードを使用する場合、バックエンドが設定されていない場合に http://www.xxxx.com/user/id などのアドレスに直接アクセスすると、バックエンドで対応する処理を実行する必要もあります。バックエンドはクライアントから 404 ページを返します。

4.router-link は、このループ内にあります。パラメータ名 = unknown

コンポーネントは、ビュー レイヤーで使用する必要があるジャンプ コンポーネントです。これは タグが行うべきことを置き換え、さらに多くのことを行うのに役立ちます。

h5 履歴モードであってもハッシュ モードであっても、その動作は一貫しているため、ルーティング モードを切り替えたい場合や、ハッシュ モードを使用するために IE9 にダウングレードしたい場合は、変更する必要はありません。

HTML5 履歴モードでは、ルーターリンクはブラウザーがページをリロードしないようにクリック イベントを保護します。

HTML5履歴モードでbaseオプションを使用する場合、すべてのto属性を記述する必要はありません(ベースパス)。

しかし、v-for ループで router-link を使用する場合、一般的に言えば、取得する必要があるのは、定義された item.xxx を通じて取得できるループ内の値です。データで定義した値を取得する必要がある場合、this.foo を通じて取得しますか?それとも foo 経由で取得する必要がありますか?それとも大丈夫ですか？

ここでは、this.foo を介してそれを取得することはできません。これは、ここでは vue のインスタンスを指しているのではなく、[オブジェクト ウィンドウ] を指しているためです。したがって、this.foo を使用して取得すると、実際には未定義になります。

 <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. axios で vue-router を使用する

 初次接触拦截器这个概念是在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打包后的文件（详细教程）

以上がvue-router プロジェクトの実践 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。