nuxtルート、移行効果、中間部品の実現コード

8868 ワード

nuxt ルート移行中間部品

Pagesのファイル.vueファイルは自動的にルートにロードされます。
0、宣言式ナビゲータ
＜nuxt-link to=“/”トップページ
使い方はrouter-linkと同じです。
1、1級ルートを定義する
pagesで作成します。vueファイルにアクセスした後、ファイル名を付けてアクセスします。
index.vue対応の経路は'/';
2、マルチレベルのルートを作成する
フォルダを作成し、フォルダ内で作成します。vueファイル
アクセス先:/フォルダ名/ファイル名
pages/
---|user/
---|index.vue
---|one.vue
--|index.vue
変換されます


router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'user',
  path: '/user',
  component: 'pages/user/index.vue'
  },
  {
  name: 'user-one',
  path: '/user/one',
  component: 'pages/user/one.vue'
  }
 ]
 }

3、動的ルートパラメータ
ひをもって下線を接頭辞のVueファイルまたはディレクトリとします。
パラメータthisを取得します。route.params.キー名_名前は/:名前になります。


pages/
 --| _slug/
 -----| comments.vue
 -----| index.vue
 --| users/
 -----| _id.vue
 --| index.vue
 
 router: {
 routes: [
  {
  name: 'index',
  path: '/',
  component: 'pages/index.vue'
  },
  {
  name: 'users-id',
  path: '/users/:id?',
  component: 'pages/users/_id.vue'
  },
  {
  name: 'slug',
  path: '/:slug',
  component: 'pages/_slug/index.vue'
  },
  {
  name: 'slug-comments',
  path: '/:slug/comments',
  component: 'pages/_slug/comments.vue'
  }
 ]
 }

4、動的ルートパラメータの検証
ダタと同級です


 validate({params}) { 
 console.log(params.  ); 

//              true Promise  resolve    false    Error ， Nuxt.js         404       500     。

return true;
 }

5、入れ子ルート
x.vueの入れ子ルートは、まずキーxフォルダを転送します。その内部のvueファイルはその入れ子ルートになります。
親コンポーネントは入れ子コンポーネントの内容を表示します。


pages/
 --| users/
 -----| _id.vue
 -----| index.vue
 --| users.vue
 
 router: {
 routes: [
  {
  path: '/users',
  component: 'pages/users.vue',
  children: [
   {
   path: '',
   component: 'pages/users/index.vue',
   name: 'users'
   },
   {
   path: ':id',
   component: 'pages/users/_id.vue',
   name: 'users-id'
   }
  ]
  }
 ]
 }

6、名前付きビュー
＜nuxt name=「componentsの名前」/>
nuxt.co nfig.jsにルート拡張構成を追加します。


 router: {
  extendRoutes(routes, resolve) {
  
  //            ,  index
  const index = routes.findIndex(route => route.name === '    ')
  
  routes[index] = {
  //            
   ...routes[index],
   
   //  components chunkNames             
   components: {
   default: routes[index].component,
   //     : resolve(__dirname, '       /.vue')
   },
   
   chunkNames: {
   //     : '       /.vue'
   }
  }
  }
 }

7、過渡効果
(1)グローバル移行効果
各ページの切り替えにフェードアウト効果があります。
1、グローバルスタイルファイルのクラスメイト/x.cssにスタイルを追加します。


 .page-enter-active,
 .page-leave-active {
  transition: opacity 0.5s;
 }
 .page-enter,
 .page-leave-active {
  opacity: 0;
 }

2、nuxt.co nfig.jsファイル中
css:[クラスets/x.css]]
(2)あるページのカスタム遷移効果
1、グローバルスタイルassites/x.cssに内容を追加します。


.test-enter-active,
.test-leave-active {
 transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
 opacity: 0;
}

2、nuxt.co nfig.jsファイル中
css:[クラスets/x.css]]
3、コンポーネントでdataと同レベル
transion:'test'
8、ミドルウェア
ミドルウェアは、カスタム関数を定義して、ページまたはページのレンダリングの前に実行できます。
(1)middlewareフォルダの下で作成します。jsファイル、ファイル名の名前は中間件の名称です。


export default function(context){

 //    context         
 ...
 //context.route       
 }

異歩ミドル：Promiseに戻ればいいです。
（2）各ページでミドルウェアを実行する
nuxt.co nfig.jsに追加します。


router: {
 middleware: '     '
 }
 }

(3)指定されたレイアウトまたはページ
コンポーネントの中でdataと同じレベルで、追加:
middleware:'中間部品の名称'
9、ルートリダイレクト
方式一:
コンポーネント


 asyncData(context, callback) {
 context.redirect('/');
 },

方式二:
中間部品を定義する


 export default function(context)
 {
 if(context.isHMR)
 {
 return;       ,     
 }

  if(context.route.fullPath==='/xxx)
  {
  context.redirect('/x')
  }
 }

中間部品をnuxt.co nfig.jsでグローバルまたは個別構成コンポーネントに構成する。
10、ルートが明るい
方式一:


 router: {
  linkActiveClass: 'active-link' 
  linkExactActiveClass: 'exact-active-link'
 }

方式二:
直接クラス名を追加します。スタイルはscoped属性がありません。
nuxt-link-exact-active父のルートはあまり明るくないです。
nuxt-link-active父ルートもハイライトされます。
方式三:
各nuxt-linkラベルにactiveClass=クラスを追加してクラスのスタイルを定義します。
11、ルーティングモードの設定
nuxt.co nfig.jsで


 router:{
 mode:'hash'
 }

補充の知識：nuxtはルートのmeta属性を設定して、nuxtはどのようにルートのmetaを設定して、nuxtはどのようにrouterのmetaを設定しますか？
nuxt公式サイトによるUIのレンダリングに集中しています。作者はバックグラウンド管理のインターフェース感覚を試してみたいです。spaモードを開くことができます。または変えないこともできます。
nuxt.jsの管理バックグランドプロジェクトに基づいて、プロジェクトの配置は、ワンストップ管理データベースとあなたの業務の添削操作ができます。プロジェクトはまだ完全になっていません。
一つの問題は、いろいろな方法を考えて、やっとこの問題を一つの愚かな方法で解決しました。
以下の通りです
routes.jsは以下の通りです


/**
 * nuxt       
 * @description                 ,         
 */
const menus = [{
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/dashboard",
    name: "dashboard",
  },
  {
    meta: {
      requireAuth: false, //    
      title: '   ', //   
    },
    path: "Welcome",
    name: "dashboard-Welcome"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/demos",
    name: "demos",
  },
  {
    meta: {
      requireAuth: false, //    
      title: '  Demo', //   
    },
    path: "List",
    name: "demos-List"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
    },
    path: "List/Detail/:id?",
    name: "demos-List-Detail-id"
  },
  {
    meta: {
      requireAuth: false, //    
      title: '    ', //   
      icon: 'fa fa-bar-chart', //    
    },
    path: "/datas/UserAnalysis",
    name: "datas-UserAnalysis"
  },
  {
    path: "/",
    name: "index"
  }
];
 
 
/**
 *         
 * @param {*} list
 * @param {*} menu
 */
const iterator = (list) => {
  for (let item in list) {
    for (const m in menus) {
      if ((list[item].name === menus[m].name) && (list[item].path === menus[m].path)) {
        console.log((list[item].name === menus[m].name) && (list[item].path === menus[m].path));
        list[item].meta = menus[m].meta;
        list[item].meta.requireAuth = true;
      }
    }
    if (list[item].children && list[item].children.length > 0) {
      iterator(list[item].children);
    } else {
      return list;
    };
  }
};
 
export default (routes, resolve) => {
  routes = iterator(routes);
  console.log(routes);
};

その後nuxt.com fig.jsを設定します。
nuxt.co nfig.jsは以下のように構成されています。


  router: { //                               。
    middleware: ['authorities'],
    extendRoutes: routes
  },

この問題は一時的に解決されました。routesに従ってラベルナビゲーション/サイドバーメニュー/パンくずナビゲーションなどを生成できます。

以上のnuxtルート、移行特効、中間部品の実現コードは小編が皆さんに提供したすべての内容です。参考にしていただければと思います。

C++は「N，X，Y，Z」形式のテキストファイルをEigen 3 Matrixに読み込む

Bash Shell注釈の複数行のいくつかの方法