Zusammenfassung der Verwendung des Vue.js-Routers (mit Code)

Dieser Artikel enthält eine Zusammenfassung der Verwendung des Vue.js-Routers (mit Code). Ich hoffe, er hilft.

b988a8fd72e5e0e42afffd18f951b277 ist ein aktualisierungsfreier Sprung für Router

Ändern Sie die Bezeichnung b988a8fd72e5e0e42afffd18f951b277 🎜> Der Standard-Anzeigedom des

b988a8fd72e5e0e42afffd18f951b277-Tags ist 3499910bf9dac5ae3c52d5ede7383485

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

kann über das

geändert werden tag

Attribut wie:

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

b988a8fd72e5e0e42afffd18f951b277Dynamische Bindungsadresse

Fügen Sie vor dem Attribut einen Doppelpunkt hinzu b988a8fd72e5e0e42afffd18f951b277 Hängen Sie dann die Variable

daran an. Wie aus dem folgenden Code hervorgeht, kann sich der Wert von to mit Homelink ändern von homelink durch die von uns festgelegte Logik. Dies ändert die Sprungrichtung

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



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

Fehlerbehandlung bei der Eingabeadresse

Wenn der Benutzer eine falsche URL-Adresse eingibt, wird automatisch zu gesprungen die eingestellte Adresse

Fügen Sie

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

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

zum Router-Konfigurationselement unter der Datei main.js hinzu, und die Seite springt zur Home-Komponente

Routing-Namensattribut

Geben Sie beim Konfigurieren des Routings das Namensattribut an, das als Adresse in b988a8fd72e5e0e42afffd18f951b277 verwendet werden kann.

//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"
});

Verwenden Sie das Namensattribut zur Angabe die Routing-Adresse (denken Sie daran, Folgendes hinzuzufügen: vor „to“)

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

Route-Jump-Methode

//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;});
          }
        }
    }

Verwandte Empfehlungen:

Einführung in die Router-Konfiguration Methode in vue.js

Wie kann der von

gemeldete Fehler beim Erstellen einer

Straße in Vue.js behoben werden?

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des Vue.js-Routers (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!