vueのルーティングは3つの第1点を言う:命令レベルのルーティングとプログラムレベルのルーティングrouter.push(); 第2点:queryとparamsを介してパラメータとpathとnameの関係を伝達する.第三点:$routerと$routeの違い
宣言:ルーティングとパラメータ取得が密接に結合されているため、それらを混合して説明し、最後にインスタンスを追加します.
htmlでコマンドでルーティングジャンプを完了する第1のケースはpath形式で幽州台歌に登る第2のケースはルーティング対象Objectの形式router 1であるここのnameは具名ルーティングを指すことに注意し、ルーティングリストの構成は{name:'wuhan',path:'/wuhan',component:WuHan}であり、WuHanはこのルーティングが到着するテンプレートまたはページである.定義はconst WuHan={template:'武昌,漢口,漢陽---{$route.query.city}}'}注意ジェジュンはqueryの形式区を通じてパラメータを伝達するので,宛先ページでもqueryの形式でしかパラメータを取得できない.queryの方法を用いずにparamsの形式でパラメータrouter 3を伝達すると、ルーティングリストのpathにparamsが伝達するパラメータを持たなければならず、そうでなければ、目的ページでパラメータ{name:'wuhan',path:'/wuhan/:city',component:WuHan}を取得できません.目的ページでパラメータに対応する値const WuHan={template:'武昌,漢口,漢陽--{$route.params.city}}}注意事項:ルーティングオブジェクトにpathとparamsが同時に現れない場合、paramsは無効になります.目的ページではパラメータが取得されません.おすすめはnameとparamsの組み合わせ、pathとqueryの組み合わせです.パラメータをparamsではなくqueryの形式で伝達し、パラメータを取得することが望ましい.paramsの方法でパラメータを伝達するため、目的のページに入った後、パラメータを正しく取得することができるが、ページをリフレッシュするとパラメータが失われる.したがってquery形式でパラメータを渡すことをお勧めします.
最後に$routerと$routeの違いについて話します.結論:何の関係もない.$routerのタイプはVueRouterで、プロジェクト全体に1つのVueRouterインスタンスしかなく、$routerを使用してルーティングジャンプを実現し、$router.push(). ジャンプに成功したら、あるページに到着し、前のページから渡されたパラメータを取得するには$routeを使用します.あるいは$route.query.または$route.params.city.すなわち,$routerと$routeはルーティングの異なる段階に作用する.

  
  
  

    
Hello App!
    

      
      
      
           
        
        
        
          

      

      router1

      router2

      router3

    
    
    
    
  
  

    // 1. Define route components.
    // These can be imported from other files
    const Foo = { template: '<div>     ，     。      ，      ！</div>'};
    const Bar = { template: '<div>     ，     。     ，     。</div>' };
    const Capital = { template: '<div>             ，   。{{$route.params.country}}</div>' }
    const Book = {template: '<div>     ---by {{$route.params.author}}</div>'}
    const WuHan = {template: '<div>  ，   ，    --- {{$route.params.city}}</div>'}
    // 2. Define some routes
    // Each route should map to a component. The "component" can
    // either be an actual component constructor created via
    // Vue.extend(), or just a component options object.
    // We'll talk about nested routes later.
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar },
      { path: '/city/:country', component: Capital },
      { path: '/book/:author', component: Book },
      { path: '/wuhan/:city', name: 'wuhan', component: WuHan }
    ]
  
    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = new VueRouter({
      routes: routes
    })
    /*
    function navigate() {
      router.push({
        path: '/wuhan',
        params: {
          city: 'wuhan'
        }
      });
    }
    */
    // 4. Create and mount the root instance.
    // Make sure to inject the router with the router option to make the
    // whole app router-aware.
    const app = new Vue({router: router}).$mount('#app')
    // Now the app has started!