Partage d'exemples de routage de base de vue-router

Cet article présente principalement des informations pertinentes sur l'explication détaillée des bases du routage de vue-router. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser cette partie du contenu. Les amis qui en ont besoin pourront s'y référer. tout le monde.

Explication détaillée des bases du routage vue-router

Aujourd'hui, j'ai résumé les bases de vue-route et les itinéraires officiellement recommandés par vue.

1. Commencer

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>

Créer un modèle (composant) :

(Vous pouvez également utiliser l'importation pour introduire des composants externes)

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

Voie d'injection de composants :

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

Créer une instance de routage :

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

Notez qu'il n'y a pas de « r » dans les routes ici (ne l'écrivez pas en tant que routeurs)

Créez une instance de vue (et montez l'instance)

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

2. Correspondance d'itinéraire dynamique

Parfois, nous avons besoin de la même structure de modèle, mais les données sont différentes à ce moment-là, ce qui équivaut à connecter des utilisateurs connectés avec des identifiants différents à la même page, mais en affichant informations indépendantes pour chaque utilisateur. Dans ce cas, nous utilisons une correspondance de routage dynamique.

Le routage dynamique utilise principalement le $route.params global et les paramètres dynamiques de la route. L'API params de la route globale stocke tous les paramètres de la route. Les paramètres du chemin sont marqués. ":" :

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>

JS

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. Routage imbriqué

1. Le routage imbriqué signifie que nous pouvons afficher dans . 🎜> lors de la configuration de l'itinéraire
Par exemple :

HTML :

JS :

<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>

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. Itinéraires nommés

1. Nommez l'itinéraire pour spécifier le saut d'itinéraire.

HTML :

JS :

<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>

5.

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")

1. Nommez la vue de rendu router-view pour spécifier quelle vue restitue le composant

HTML :

JS :

<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>

6. Redirections et alias

// 四个模板
  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")

Redirections et alias Tout d'abord, laissez-moi vous expliquer. qu'est-ce que la redirection. Direction et Alias ​​​​

『Redirect』 signifie que lorsque l'utilisateur accède à /a, l'URL sera remplacée par /b, puis la route correspondante est /b,

『Alias』 / L'alias de a est /b, ce qui signifie que lorsque l'utilisateur visite /b, l'URL reste /b, mais la correspondance d'itinéraire est /a, comme si l'utilisateur visitait /a. L'alias de /a est /b, ce qui signifie que lorsqu'un utilisateur accède à /b, l'URL reste /b, mais la correspondance de route est /a, comme si l'utilisateur accédait à /a.

La redirection utilise principalement des paramètres : la redirection et l'alias utilisent principalement des paramètres : alias

HTML :

JS :

<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>

Recommandations associées :

  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 implémente la page à onglets

Basé sur Vue, Vuex, Vue-router pour réaliser la fonction de commutation d'animation

Trois types de Vue-Router pour réaliser le saut entre les composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!