ホームページ > ウェブフロントエンド > jsチュートリアル > Vue.jsルーターの使い方まとめ(コード付き)

Vue.jsルーターの使い方まとめ(コード付き)

不言
リリース: 2018-08-23 16:21:13
オリジナル
1664 人が閲覧しました

この記事は、Vue.jsルーターの使い方をまとめたものです(コード付き)。必要な方は参考にしていただければ幸いです。

はルーターの更新不要のジャンプです

デフォルトでラベルを表示するには、 ラベルを変更します

は、次のように tag 属性を使用して変更できます。

属性の前にコロンを追加します。 次に変数をアタッチします

以下のコードからわかるように、to の値は homelink によって変更できます。つまり、設定したロジックを通じて homelink の値に影響を与えることができます。 ジャンプ方向を変更する

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



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }
ログイン後にコピー

入力アドレス入力エラー処理

ユーザーが間違った URL アドレスを入力すると、設定されたアドレスに自動的にジャンプします

ルーター設定に

{path:&#39;*&#39;,redirect:&#39;/&#39;}
ログイン後にコピー
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"
});
ログイン後にコピー

入力が存在しませんmain.js ファイルの下の項目 アドレス、ページはホームコンポーネントにジャンプします


ルート名属性

ルートを設定するとき、それに name 属性を与えます。これは

//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"
});
ログイン後にコピー

name 属性を使用してルーティング アドレスを指定します (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>
ログイン後にコピー

ルート ジャンプ方法

//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 の設定方法の紹介router

Vue.js

BuildRouteby エラーを解決するにはどうすればよいですか?

以上がVue.jsルーターの使い方まとめ(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート