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

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

不言

Freigeben： 2018-08-23 16:21:13

Original

1669 Leute haben es durchsucht

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

ist ein aktualisierungsfreier Sprung für Router

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

-Tags ist

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

Nach dem Login kopieren

kann über das

geändert werden tag

Attribut wie:

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

Nach dem Login kopieren

Dynamische Bindungsadresse

Fügen Sie vor dem Attribut einen Doppelpunkt hinzu 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"
    }

Nach dem Login kopieren

Fehlerbehandlung bei der Eingabeadresse

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

Fügen Sie

{path:&#39;*&#39;,redirect:&#39;/&#39;}

Nach dem Login kopieren

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:&#39;*&#39;,redirect:&#39;/&#39;}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

Nach dem Login kopieren

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 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:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!