ホームページ > 記事 > ウェブフロントエンド > vue-routerの基本ルーティング例の共有

vue-routerの基本ルーティング例の共有

小云云オリジナル: 2018-01-15 11:22:241241ブラウズ

この記事は、vue-router ルーティングの基本の詳細な説明に関する関連情報を主に紹介します。この記事が、この部分の内容を理解して習得するのに役立つことを願っています。

vue-routerルーティングの基本を詳しく解説

今日はvue-routeの基本とvueが公式推奨しているルートをまとめました。

HTML

<p id="myp">
 <h1>简单路由</h1>
 <router-link to="/foo">Go to foo</router-link>  
 <router-link to="/bar">Go to bar</router-link>  

// 渲染出口
 <router-view></router-view>
</p>

を開始します。テンプレート(コンポーネント)を作成します:

(インポートを使用して外部コンポーネントを導入することもできます)

  var foo={template:"<p>我是foo 组件</p>"};
  var bar={template:"<p>我是bar 组件</p>"};

コンポーネントインジェクションルーティング:

var routes = [
   {path:&#39;/foo&#39;,component:foo},
   {path:&#39;/bar&#39;,component:b ar},
  ];

ルーティングインスタンスを作成します:

// 这里还可以传入其他配置
const router = new VueRouter({
   routes   // （缩写）相当于 routes: routes; 
  });

ここではルートに「r」がないことに注意してください (ルーターとして書かないでください)

vue インスタンスを作成します (そしてインスタンスをマウントします)

 var routerVue = new Vue({
   router
  }).$mount("#myp");

2. 動的ルートマッチング

同じテンプレート構造が必要な場合がありますが、そのときのデータは異なります。これは、異なる ID でログインしているユーザーを同じページに接続することに相当しますが、ユーザーごとに独立した情報を表示するのが動的ルートマッチングです。

動的ルーティングは、主にグローバル $route.params とルートの動的パラメータを使用します。グローバルルートの params API には、ルートのパラメータがすべて「:」でマークされています。 HTML

<p id="myp">
// 点击对应链接时传入对应参数foo 和 bar
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</p>

const User = {
   template:&#39;<p>我的ID是{{ $route.params.id }}</p>&#39;,
// 在路由切换时可以观察路由
   watch:{
    &#39;$route&#39;(to,form){
     console.log(to); //要到达的
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
     {path:&#39;/user/:id&#39;,component:User} // 标记动态参数 id
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

3. ネストされたルーティング

1. 現時点では、975b587bf85a482ea10b0a28848e78a4 をレンダリングできます。ルーティングの設定子を使用します

例:

HTML:

<p id="myp">
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</p>

JS:

const User = {
   template:&#39;<p><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></p>&#39;,
   }

   // 子路由
   const userChildOne = {
    template:&#39;<p>我是 userChildOne</p>&#39;
   }
   const userChildTwo = {
    template:&#39;<p>我是 userChildTwo</p>&#39;
   }
  const router = new VueRouter({
   routes:[
     {path:&#39;/user/:id&#39;,component:User,
      children:[ // 用法和参数和routes 一样
       {path:"/user/childone",component:userChildOne},
       {path:"/user/childtwo",component:userChildTwo}
      ]

     }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

4. ルートに名前を付けて、ルートジャンプを指定します。、パラメータ名と v-bind

HTML:

<p id="myp">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:&#39;userOne&#39;,params:{userId:&#39;123&#39;}}">Go to foo</router-link> 
 <router-link :to="{name:&#39;userTwo&#39;,params:{userId:&#39;456&#39;}}">Go to bar</router-link> 

  <router-view></router-view>
</p>

JS:

const User = {
   template:&#39;<p>我的ID是{{ $route.params.userId }}</p>&#39;,
   watch:{
    &#39;$route&#39;(to,form){
     console.log(to);
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
   // name 一一对应上
     {path:&#39;/user/:userId&#39;,name:"userOne",component:User},
     {path:&#39;/user/:userId&#39;,name:"userTwo",component:User}
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

を使用する必要があります。 5. ビューに名前を付けます

1. レンダリングビューに router-view という名前を付けます。ビューはコンポーネントをレンダリングします

HTML:

<p id="myp">
<!-- 要用v-bind 的绑定to -->
 <router-link :to="{name:&#39;userOne&#39;,params:{userId:&#39;123&#39;}}">Go to foo</router-link> 
 <router-link :to="{name:&#39;userTwo&#39;,params:{userId:&#39;456&#39;}}">Go to bar</router-link> 
<!-- 视图命名 如果不写name 则为默认为 default-->
  <router-view></router-view>
  <router-view name=&#39;b&#39;></router-view>
</p>

JS:

// 四个模板
  const UserA = {
   template:&#39;<p>我是one,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const UserB = {
   template:&#39;<p>我是two,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const UserC = {
   template:&#39;<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>&#39;,
  }
  const UserD = {
   template:&#39;<p>我是four,ID是{{ $route.params.userId }}</p>&#39;,
  }
  const router = new VueRouter({
   routes:[
   // name 一一对应上
     { 
      path:&#39;/user/:userId&#39;,
      name:"userOne",
      components:{ // 注意这里为components 多个“ s ”
        default:UserA,
        b:UserB
      }
     },
     { 
      path:&#39;/user/:userId&#39;,
      name:"userTwo",
      components:{
        default:UserD,
        b:UserC
      }
    }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myp")

6. リダイレクトとエイリアス

まず、リダイレクトとエイリアスとは何かについて説明します。

"redirect" これは、ユーザーが /a にアクセスすると、URL が /b に置き換えられ、一致するルートが /b になることを意味します。『エイリアス』 /a のエイリアスは、/b であることを意味します。ユーザーが /b にアクセスすると、URL は /b のままですが、ユーザーが /a にアクセスしたかのように、ルート一致は /a になります。 /a のエイリアスは /b です。つまり、ユーザーが /b にアクセスすると、URL は /b のままですが、ユーザーが /a にアクセスした場合と同様に、ルート一致は /a になります。リダイレクトの主なパラメータ: リダイレクトとエイリアスは主に次のパラメータを使用します: alias

Html:

<p id="myp">
 <h2>效果查看地址栏最后面的变化</h2>
 <router-link to="/User/foo">Go to foo</router-link> 
 <router-link to="/User/bar">Go to bar</router-link> 
 <router-link to="/User/Car">Go to bar</router-link> 

  <router-view></router-view>
</p>

E
JS:

  const User = {
   template:&#39;<p>我是同一个页面</p>&#39;,
  }
  const router = new VueRouter({
   mode:"history",
   routes:[
     { path:&#39;/User/foo&#39;,component:User},
     { path:&#39;/User/bar&#39;,redirect: &#39;/User/foo&#39;,component:User},
     // 重定向的目标也可以是一个命名的路由：
     // 甚至是一个方法，动态返回重定向目标：

     // 别名设置
     { path:&#39;/User/foo&#39;,alias: &#39;/User/Car&#39;}

   ]
  });

  var myVue = new Vue({ 
    router
  }).$mount("#myp")

vue-routerの基本ルーティング例の共有

関連記事