ルート、二つの経路、3つのルートとジャンプでのVue Vueのルータ

私は、ルーティングVueの中で今日のビットを書きます

まず、新しい空のプロジェクトを作成するには、コマンドラインを使用して、私が使用するルートを知って、該当する依存ルートをダウンロード

VUEのinit WebPACKのdemo5

プロジェクトの完了後にどこのCD demo5を入力します

demo5フォルダを導入するために開かvscode続く、インストールと起動依存のコマンドラインはvscodeが来ます

cnpmインストール

DEVを実行cnpm

8080で正常に起動した後、

、限られたVUEは、一部のページを用意し、ナビゲーションをナビゲーションを表示するために、私は頭のこちら側を表示したいです

次いで、ヘッダに追加

コードはGitHubの上に同期した後、まず、ページを見て https://github.com/JasmineQian/Vue_Sample

私は使用方法のジャンプについてお話しましょう

  methods: {
    goToLearnPage() {
      //跳转到上一次的页面
      //this.$router.go(-1)

      //指定跳转的地址
      //this.$router.replace('/learn')

      //指定跳转路由的名字下
      //this.$router.replace({name:'menuLink'})

      //通过push进行跳转
      this.$router.push("/learn");
      //this.$router.push({name:'/learn'})
    }
  }

ページは次のよう：

私たちのページについて2つのルートがあります

寄付金の下に3つのルートを追加します。

ルーティングの設定

私は、経路の役割についてお話しましょう：

各パスのVUEルータ基本的な役割は、ルーティング変更することにより、対応するコンポーネント、及びコンポーネント間にマッピングされているスイッチ。

従来の電流パスのURLの後ろに＃ルールを追加し、パス！/パス、フロントエンドに設定されているパスルーティングパス。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Admin from '@/components/Admin'
import Login from '@/components/Login'
import Menu from '@/components/Menu'
import Register from '@/components/Register'
import About from '@/components/about/About'

//二级路由
import News from '@/components/about/News'
import Contact from '@/components/about/Contact'
import Donate from '@/components/about/Donate'
import Guide from '@/components/about/Guide'

//333级路由
import WechatDonate from '@/components/about/donate/WechatDonate'
import AlipayDonate from '@/components/about/donate/AlipayDonate'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',component: Home},
    {path: '/menu',component: Menu},
    {path: '/admin',component: Admin},
    {path: '/about',component: About ,children :[
      {path: '/about/news',component: News},
      {path: '/about/contact',component: Contact},
      {path: '/about/donate',component: Donate,children:[
        {path: '/about/donate/wechat',component: WechatDonate},
         {path: '/about/donate/alipay',component: AlipayDonate},
         {path: '/about/donate*', redirect:'/about/donate/alipay'}
      ]},
      {path: '/about/guide',component: Guide},
      {path:'/about*',redirect:'/about/news'}
    ]
    },
    {path: '/login',component: Login},
    {path: '/register',component: Register},
    {path: '*',redirect: '/'}

  ]
})

デフォルトルートを追加し、リダイレクトリダイレクトを使用します

ジャンプ指定ルータリンク

ルータビュー表示

例について

<template>
    <div>
        <div class="row mb-5">
            <div class="col-4">
                 <!--导航---- ad浩丰科技奥德赛-->
                <div calss="list-group mb-5">
                    <router-link tag="li" class="nav-link" to="/about/news">
                        <a class="list-group-item list-group-item-action">最新新闻</a>
                    </router-link>
                     <router-link tag="li" class="nav-link" to="/about/contact">
                        <a class="list-group-item list-group-item-action">联系方式</a>
                    </router-link>
                     <router-link tag="li" class="nav-link" to="/about/guide">
                        <a class="list-group-item list-group-item-action">文档指导</a>
                    </router-link>
                    <router-link tag="li" class="nav-link" to="/about/donate">
                        <a class="list-group-item list-group-item-action">捐赠方式</a>
                    </router-link>
                </div>
        </div>
                <div class="col-8">
                    <!--导航对应的内容-->
                    <router-view></router-view>
                </div>
        </div>
           
    </div>
</template>

<script>
import News from '@/components/about/News'
import Contact from '@/components/about/Contact'
import Guide from '@/components/about/Guide'

export default {
    components:{
    News,Contact,Guide
  }
}
</script>

ます。https：//www.cnblogs.com/qianjinyan/p/10899921.htmlで再現

ルート、二つの経路、3つのルートとジャンプでのVue Vueのルータ

おすすめ