ルーターの使用

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


//  定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  {
    
     path: '/foo', component: Foo },
  {
    
     path: '/bar', component: Bar }
]

//  创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    
    
  routes // (缩写) 相当于 routes: routes
})

動的ルーティング

動的ルーティングとは何ですか？
動的ルーティングは、パラメータデータを受信できるルーティングの形式であり、ルーティングアドレスの一部が変更されます
動的ルーティングによって渡されたパラメータを受信する方法は？
$route.params
props属性
Aを介してパラメータデータを取得して渡すことができます。props属性をtrueに設定すると、route.paramsがコンポーネント属性として設定され、コンポーネントはpropsBを介してroute.paramsを受信できます。props
属性を1に設定できます。オブジェクトの場合、コンポーネントはpropsを介してオブジェクトのデータを受け取ることができます
。C。propsプロパティを関数として設定し、パラメータデータとオブジェクトデータを同時にコンポーネントに渡すこともできます。

ここに画像の説明を挿入

プログラムによるナビゲーションとルーティングパラメータ

  // 1. 用name路径的方式进行路由传参
  this.$router.push({
    
     name: 'Goods', params: {
    
     goodsID: id } })
 // 2.  用path路径的方式进行路由传参
   this.$router.push({
    
    path:'goods',query:{
    
    goodsID:id}})	
    //接收this.$route.query.goodsID

ハッシュと履歴モード

ここに画像の説明を挿入
vue-routerのデフォルトはハッシュモードですが、urは＃を使用してルートを検索しますが、これはseoには適していません。履歴を設定すると、通常のURLモードの
履歴モード（通常のURLモード）を使用できます。 history.pushStateAPIをフルに活用してURLジャンプを完了するページをリロードする必要はありません

使用する：

const router = new VueRouter({
    
    
  mode: 'history',
  routes: [...]
})

2つの違い

＃記号付きのハッシュモードURL、＃記号なしの履歴モード
URLの指定を検討する場合は、履歴モードを使用する必要があります。履歴モードには、開発習慣に適した通常のURLである＃がないためです。
VueとReactで作成されたページをサードパーティのアプリと共有します。一部のアプリはURLを許可しないため、履歴モードを使用します
履歴の使用に関する問題の1つは、セカンダリページにアクセスすると、更新操作を実行すると404エラーが発生することです。その後、バックエンドと連携して、ホームページにリダイレクトするようにApacheまたはNginxのURLリダイレクトを構成する必要があります。ルーティング

ルーティングガード

これは、グローバルプリガードの登録に
使用できる登録がない場合のユーザーログインインターセプトに使用できますrouter.beforeEach。

const router = new VueRouter({
    
     ... })

router.beforeEach((to, from, next) => {
    
    
  // ...
})

各ガードメソッドは、次の3つのパラメータを受け取ります。

to：Route：入力しようとしているターゲットルートオブジェクト
差出人：ルート：現在のナビゲーションが出発しようとしているルート
次へ：関数：このフックを解決するには、このメソッドを呼び出す必要があります。実行効果は、次のメソッドの呼び出しパラメーターによって異なります。

コンポーネントのガード

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const Foo = {
    
    
  template: `...`,
  beforeRouteEnter (to, from, next) {
    
    
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    
    
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    
    
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

vue-router作業の一般的な基本