So springen Sie in Vue von Seite A zu Seite B-View.js-php.cn

Heim

Web-Frontend

View.js

So springen Sie in Vue von Seite A zu Seite B

藏色散人

Sep 11, 2021 am 11:29 AM

vue

Vue implementiert die Methode zum Springen von Seite A zu Seite B: 1. Legen Sie Seite A mit Code wie „“ fest. 2. Fügen Sie die umgeleitete URL zu $router hinzu. 3. Legen Sie Seite B mit Code wie „created(“ fest. ) {...}"; 4. Ändern Sie einfach den JS-Inhalt.

So springen Sie in Vue von Seite A zu Seite B

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, DELL G3-Computer.

Wie kann Vue von Seite A zu Seite B springen?

vue springt von Schnittstelle A zu Schnittstelle B und überträgt Parameter

Kürzlich bin ich auf die Anforderung gestoßen, dass ich von Schnittstelle A auf eine Schaltfläche klicken muss, um zu Schnittstelle B zu springen und Parameter zu übertragen.

Ich habe die Anforderung folgendermaßen implementiert:

Eine Seite:

<el-button size="mini"
                   type="success"
                   @click="add"
                   icon="el-icon-plus"
                   round
                   plain>{{$t(&#39;common.add&#39;)}}</el-button>
        <el-button type="primary"
                   size="mini"
                   @click="edit"
                   icon="el-icon-edit"
                   plain
                   round>{{ $t(&#39;common.edit&#39;) }}</el-button>

Nach dem Login kopieren

Klickereignis:

add() {
      this.lockTaskStatus = &#39;new&#39;
      this.toLockTaskManagePage()},edit() {
      this.lockTaskStatus = &#39;edit&#39;
      this.toLockTaskManagePage()},toLockTaskManagePage() {
      this.$router.push({
        path: &#39;/taskLockManage&#39;,
        name: &#39;TaskLockManage&#39;,
        params: {
          status: this.lockTaskStatus        }
      })}

Nach dem Login kopieren

Die umgeleitete URL wird zu $router hinzugefügt.

Hinzufügen von / vor der URL im Pfad bedeutet, dass sie sich im Stammverzeichnis befindet, andernfalls bedeutet es, dass es sich um eine Unterroute handelt.

Übergeben Sie Parameter durch die Kombination aus Pfad + Parametern.

B-Seite:

created() {
    this.getParams()
  },
  watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    $route: &#39;getParams&#39;
  },
  methods: {
    getParams() {
      // 取到路由带过来的参数
      const res = this.$route.params.status
      console.log(&#39;getParams&#39;, res)
    }}

Nach dem Login kopieren

Abschließend müssen Sie sich in router/index.js registrieren:

{
    path: &#39;/taskLockManage&#39;,
    component: Layout,
    redirect: &#39;/taskManage/index&#39;,
    hidden: true,
    children: [
      {
        path: &#39;taskLockManage&#39;,
        component: () => import(&#39;@/views/taskManage/taskLockManage&#39;),
        name: &#39;TaskLockManage&#39;,
        meta: { title: &#39;taskLockManage&#39;, icon: &#39;user&#39;, noCache: true }
      }
    ]}

Nach dem Login kopieren

Auf diese Weise kann der Sprung erreicht werden. (PS: Dies ist eine bisher bessere Methode. Ich hoffe, jemand hat eine bessere Anleitung.)

Verwandte Empfehlungen: „vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonSo springen Sie in Vue von Seite A zu Seite B. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn