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.

est un saut sans actualisation pour les routeurs

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

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

est

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

attribut to of 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

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

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!