Vue 0の基本的な学習ルート（26）-Vueルーティングのルーティングメタ情報の使用法を示し、メタ属性と詳細なケース（詳細なケースコード分析プロセスとバージョン反復プロセスを含む）を通じて検証するルートを定義します。

1はじめに

メタ情報のルーティングは認証に似ています。たとえば、詳細ページに加えて、前の記事savedPositionで書いた効果を使用したくないページがある場合、他のページはクリックして先頭に戻ります。このときどうすればよいですか？

一つずつ厳密に判断するのはとても面倒です。

現在のto目標がview、この例のように1ページしかないかどうかを判断すると、幸いなことに、数百ページある場合、それを解決する方法はありません。

したがって、ラベリングにルーティングメタ情報を使用できます。これは、実際にはルートのカスタム属性であるラベルのカスタム属性と同じです。

2.メタ情報のルーティング

metaフィールドを構成できる場合は、ルートを定義します

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/foo',
      component: Foo,
      children: [
        {
    
    
          path: 'bar',
          component: Bar,
          // a meta field
          meta: {
    
     requiresAuth: true }
        }
      ]
    }
  ]
})

では、どのようにしてこのmetaフィールドにアクセスしますか？

まず、routes各ルートオブジェクト構成を呼び出してレコードをルーティングします。ルートレコードはネストできるため、ルートが正常に一致すると、複数のルートレコードと一致する場合があります

たとえば、上記のルーティング構成によれば、/foo/barこれURLは親レコードと一致し、ルートレコードをサブルートします。

すべてのルートは$route、$route.matched配列のオブジェクトに公開される（のナビゲーションでルートオブジェクトも保護される）ルート一致を記録しました。したがって、$route.matchedルートレコードmetaフィールドを確認するためにトラバースする必要があります。

次の例は、グローバルナビゲーションガードのメタフィールドのチェックを示しています。

router.beforeEach((to, from, next) => {
    
    
  if (to.matched.some(record => record.meta.requiresAuth)) {
    
    
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
    
    
      next({
    
    
        path: '/login',
        query: {
    
     redirect: to.fullPath }
      })
    } else {
    
    
      next()
    }
  } else {
    
    
    next() // 确保一定要调用 next()
  }
})

3.meta検証するルートの定義による

const router = new Router({
    
    
  routes: [
    {
    
    
      path: '/user',
      component: User,
      children: [
        {
    
    
          path: '',
          name: 'user',
          component: Profile,
          meta: {
    
     requiresAuth: true }
        },
        {
    
    
          path: 'cart',
          name: 'user-cart',
          component: Cart,
          meta: {
    
     requiresAuth: true }
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
    
    
  NProgress.start()

  if (to.meta.requiresAuth && !isLogin) {
    
    
      next({
    
    
        name: 'login',
      })
  } else {
    
    
    next()
  }
  
})

または

const router = new Router({
    
    
  routes: [
    {
    
    
      path: '/user',
      component: User,
      meta: {
    
     requiresAuth: true }
      children: [
        {
    
    
          path: '',
          name: 'user',
          component: Profile
        },
        {
    
    
          path: 'cart',
          name: 'user-cart',
          component: Cart
        }
      ]
    }
  ]
})

const isLogin = true;

router.beforeEach((to, from, next) => {
    
    
  NProgress.start()

  if (to.matched.some(record => record.meta.requiresAuth) && !isLogin) {
    
    
      next({
    
    
        name: 'login',
      })
  } else {
    
    
    next()
  }
  
})

4.例

4.1 example01

詳細ページに加えて、他のページの進むと戻るをクリックすると、すべてトッピングされます。

ルート下の各ページのmeta属性と値は自由に設定できます。=>

それを設定した後、我々はできるscrollBehaviorそれの判定を行う。場合は値to下metaの属性現在のページが真である、下ります。

\ app \ src \ router \ index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/views/Home';
import About from '@/views/About';
import Detail from '@/views/Detail';


Vue.use(VueRouter);

let router = new VueRouter({
    
    
    mode: 'history',

    scrollBehavior(to, from, savedPosition) {
    
    
        console.log(savedPosition);

        if (to.meta.isToSavedPosition && savedPosition) {
    
    
            // 调用的浏览器的历史记录
            return savedPosition;
        }

        return {
    
    
            x: 0,
            y: 0
        }
    },

    routes: [
        {
    
    
            path: '/',
            name: 'home',
            component: Home
        },
        {
    
    
            path: '/about',
            name: 'about',
            component: About
        },
        {
    
    
            path: '/view',
            name: 'view',
            component: Detail,
            meta: {
    
     isToSavedPosition: true}
        }
    ]
});

export default router;

優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.32ブランチ：branch07

コミットの説明：a2.32（example01-1-予備的な実装。ただし、詳細ページを除き、他のページを前後にクリックして上に移動します）

タグ：a2.32

4.2 example02

上記の方法により、現在のページ0が戻ったときにリセットされるかどうかを判断できます。まだ元の位置を維持しますか？

私たちはネイティブのロジックの判断の方法を使用する場合、それは非常に面倒になります。この時点で、我々は情報を記録することができ路由原元信息、そのルートに渡し、toおよびfrom対応するカスタムパラメータ取得元信息処理のために。

たとえば、メニューがたくさんある、つまりページにナビゲーションが必要な場合、このルーティング方法を使用してナビゲーションを動的に生成する方法があることがわかります。ページが3つあり、3つのナビゲーションを動的に生成します。

4.2.1example02-1

さらにisNav、このページにナビゲーションリンクが追加されているかどうかを意味します。

    routes: [
        {
    
    
            path: '/',
            name: 'home',
            component: Home
        },
        {
    
    
            path: '/about',
            name: 'about',
            component: About
        },
        {
    
    
            path: '/view',
            name: 'view',
            component: Detail,
            meta: {
    
     isToSavedPosition: true, isNav: true }
        }
    ]

app \ src \ views \ Home.vue

<template>
    <div>
        <nav>
            <div v-for="nav of navs">
                <router-link :to="nav.path">{
   
   {nav.name}}</router-link>
                <span> | </span>
            </div>
        </nav>
        <hr>
        <ul>
            <li v-for="i of 100">{
   
   {i}}</li>
        </ul>
    </div>
</template>

<script>

    export default {
     
     
        name: "Home",

        data() {
     
     
            return {
     
     
                navs: []
            }
        },

        created() {
     
     
            console.log(this.$router);
            // this.$router.options.routes 所有路由的信息
            this.navs = this.$router.options.routes;
        }
    }
</script>

<style>
</style>

動的に生成したくない場合=>

meta: {
    
     isToSavedPosition: true, isNav: false }

そして、createdフィルターで

<template>
    <div>
        <nav>
            <div v-for="nav of navs">
                <router-link :to="nav.path">{
   
   {nav.name}}</router-link>
                <span> | </span>
            </div>
        </nav>
        <hr>
        <ul>
            <li v-for="i of 100">{
   
   {i}}</li>
        </ul>
    </div>
</template>

<script>

    export default {
     
     
        name: "Home",

        data() {
     
     
            return {
     
     
                navs: []
            }
        },

        created() {
     
     
            console.log(this.$router);
            // this.$router.options.routes 所有路由的信息
            // this.navs = this.$router.options.routes;
            this.navs = this.$router.options.routes.filter(route => {
     
     
                // 无meta标签
                if (route.meta === undefined) {
     
     
                    return true;
                }
                // 有meta标签 => 需要显示就显示
                if (route.meta.isNav === true) {
     
     
                    return true;
                }
            });
        }
    }
</script>

<style>
</style>

優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.33ブランチ：branch07

コミットの説明：a2.33（example02-1-動的に生成されたサブナビゲーション）

タグ：a2.33

4.2.2 example02-2

name英語を表示したくない場合はmeta、中国語の属性を追加してください。

metaこのメタデータは、実際には重要なデータとは関係のない傍観者データを格納します。タグのカスタム属性と同様に、主に重要度の低いデータをマウントします。

    routes: [
        {
    
    
            path: '/',
            name: 'home',
            component: Home,
            meta: {
    
     navName: '首页' }
        },
        {
    
    
            path: '/about',
            name: 'about',
            component: About,
            meta: {
    
     navName: '关于我们' }
        },
        {
    
    
            path: '/view',
            name: 'view',
            component: Detail,
            meta: {
    
     isToSavedPosition: true, isNav: false, navName: '视图' }
        }
    ]

\ app \ src \ views \ Home.vue

<template>
    <div>
        <nav>
            <div v-for="nav of navs">
                <router-link :to="nav.path">{
   
   {nav.meta.navName}}</router-link>
                <span> | </span>
            </div>
        </nav>
        <hr>
        <ul>
            <li v-for="i of 100">{
   
   {i}}</li>
        </ul>
    </div>
</template>

<script>

    export default {
     
     
        name: "Home",

        data() {
     
     
            return {
     
     
                navs: []
            }
        },

        created() {
     
     
            console.log(this.$router);
            // this.$router.options.routes 所有路由的信息
            // this.navs = this.$router.options.routes;
            this.navs = this.$router.options.routes.filter(route => {
     
     
                // 无meta标签
                if (route.meta === undefined || route.meta.isNav === undefined) {
     
     
                    return true;
                }
                // 有meta标签 => 需要显示就显示
                if (route.meta.isNav === true) {
     
     
                    return true;
                }
            });
        }
    }
</script>

<style>
</style>

優先：https：//
https：//github.com/6xiaoDi/blog-vue-Novice/tree/a2.34ブランチ：branch07

コミットの説明：a2.34（example02-2-動的に生成された中国語が添付されたサブナビゲーション）

タグ：a2.34

コード変更の場所をブログに反映するのは簡単ではないことを考慮して、Xiaodiはgithubを使用してコードをホストします。githubをチェックして詳細なバージョン変更プロセスを確認し、ブログで学ぶことができます。

（後で追加されます）