vueページのジャンプとパスを実現する8つの方法

vueでは各ページがルートで宣言する必要があることを知っています.router/indexです.jsには次のコードが書かれています.

import Vue from 'vue'
import Router from 'vue-router'
import Test from "../components/Test";
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
		  {
		      path: '/t',
		      name: 'Test',
		      component: Test,
		      hidden:true
		    },
    	]
    })

ページジャンプを実現し、パラメータを伝達するにはいくつかの方法があります.方法1:templateでラベルを使用してジャンプを実現することができます.ジャンプの経路はhttp://localhost:8080/t?index=id次のようになります.

<router-link to="/t?index=1">
     <button class="btn btn-default">    button>
router-link>

ボタンをクリックするだけでジャンプを実現でき、jsコードを書く必要はなく、パラメータを渡す必要がある場合は/t?index=1でよい.これにより、ジャンプしたページ取得パラメータはwindow.location.hrefで完全なurlを取得し、パラメータを切り取ることができる.次のコードでパラメータを取得することもできます

this.$route.query.index

方法2:ジャンプの経路はhttp://localhost:8080/t?index=id

<router-link :to="{path:'/t',query: {index: 1}}">
     <button class="btn btn-default">    button>
router-link>

ここではtoの前に必ずコロンを付け,pathの値は上のルーティング定義の値と一致し,パラメータ辞書を参照する.受信パラメータ:

this.$route.query.index

方法3:ルーティングの名前付け方法:ジャンプのパスはhttp://localhost:8080/t?index=id

<router-link :to="{name:'Test',params: {index: 1}}">
     <button class="btn btn-default">    button>
router-link>

ここのnameもrouter/indexに注意してください.jsで宣言されたname値は一致し、パラメータはparamsを使用し、nameとペアを組んだのはparamsであり、pathとペアを組んだのはqueryである.受信パラメータ:

this.$route.params.index

方法四:ジャンプの経路はhttp://localhost:8080/t/id

     <button class="btn btn-default">    button>
router-link>

この場合のルーティングも、より次の形式で行う必要があります.

routes: [
		  {
		      path: '/t/:index',
		      name: 'Test',
		      component: Test,
		      hidden:true
		    },
    	]

受信パラメータ:

this.$route.params.index

方法5:上記の4つの方法はhtmlで実現されたジャンプであり、jsで実現されたジャンプとパラメータを伝達する方法もあり、コードは以下の通りである.

<template>
  button>
template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t?index=1'});
            }
        }
    }
script>

受信パラメータは依然として使用されます

this.$route.query.index

方法6:

<template>
  button>
template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t',query:{ index:'1'}});
            }
        }
    }
script>

受信パラメータは依然として使用されます

this.$route.query.index

方法7:

<template>
  button>
template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t/index'});
            }
        }
    }
script>

受信パラメータは依然として使用されます

this.$route.query.index

方法8:

<template>
  button>
template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: 'Test',params:{ index:'1'}});
            }
        }
    }
script>

受信パラメータは依然として使用されます

this.$route.params.index