Résumé de l'utilisation du routeur Vue.js (avec code)

Cet article vous apporte un résumé de la façon d'utiliser le routeur Vue.js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

b988a8fd72e5e0e42afffd18f951b277 est un saut sans actualisation pour les routeurs

Remplacez l'étiquette b988a8fd72e5e0e42afffd18f951b277 par l'étiquette d'affichage par défaut

Le Dom d'affichage par défaut de la balise

b988a8fd72e5e0e42afffd18f951b277 est 3499910bf9dac5ae3c52d5ede7383485

<router-link to="/" class="nav-link">主页</router-link>

qui peut être modifié via le Attribut tag Par exemple :

<router-link to="/" tag="p" class="nav-link">主页</router-link>

b988a8fd72e5e0e42afffd18f951b277 attribut to of b988a8fd72e5e0e42afffd18f951b277 Ajoutez deux points et attachez la variable

Comme le montre le code ci-dessous, la valeur de to peut changer avec homelink. homelink via la logique que nous avons définie pour modifier la direction du saut b988a8fd72e5e0e42afffd18f951b277

Gestion des erreurs de saisie de l'adresse d'entrée

<router-link :to="homelink" tag="p" class="nav-link">主页</router-link>



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }

Lorsque l'utilisateur saisit une adresse URL incorrecte. , passez automatiquement à Définir l'adresse

Ajoutez

{path:'*',redirect:'/'}

à l'élément de configuration du routeur sous le fichier main.js Entrez une adresse inexistante et la page passera à l'accueil. composant

const router= new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/menu',component:Menu},
    {path:'/admin',component:Admin},
    {path:'/about',component:About},
    {path:'/login',component:Login},
    {path:'/register',component:Register},
    {path:'*',redirect:'/'}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

Attribut de nom de route

Lors de la configuration de la route, donnez-lui l'attribut de nom, qui peut être utilisé comme adresse dans b988a8fd72e5e0e42afffd18f951b277

Utilisez l'attribut name pour préciser l'adresse de l'itinéraire (n'oubliez pas d'ajouter : devant à)

//main.js
const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},        name属性为 home
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:'*',redirect:'/'}
  ],
  mode:"history"
});

Méthode de saut d'itinéraire

        <ul class="navbar-nav">
          <li><router-link :to="{name:&#39;home&#39;}" class="nav-link">主页</router-link></li>
          <li><router-link :to="{name:&#39;menu&#39;}" class="nav-link">菜单</router-link></li>
          <li><router-link to="admin" class="nav-link">管理</router-link></li>
          <li><router-link to="about" class="nav-link">关于我们</router-link></li>
        </ul>

recommandations :

//html
<button @click="goToMenu" class="btn btn-success">Let`s order</button>

//js
 export default {
        name: "Home",
        methods:{
          goToMenu(){
            //跳转到上一次浏览的页面
            this.$router.go(-1);

            //指定跳转的地址
            this.$router.replace(&#39;/menu&#39;)

            //指定跳转路由的名字下（路由name值）
            this.$router.replace({name:&#39;menu&#39;});

            //通过 push 进行跳转(最常用)
            this.$router.push(&#39;/menu&#39;);
            this.$router.push({name:&#39;menu&#39;});
          }
        }
    }

vue.js Introduction à la méthode de configuration du routeur

Vue.jsConstruire une Route Comment résoudre l'erreur signalée par  ?

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!