Vue-ルーティングホッピングおよびルーティングパラメータの問題の詳細

Vueでのルーティングジャンプには4つの方法があります

router-link

this.$router.push()(関数内呼び出し)

this.$router.replace()(pushと同じ使い方)

this.$router.go(n)

一.パラメトリックルーティングなしジャンプ
1. router-link
ルーティング構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

2. this.$router.push()
ルーティング構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.push('/index')
this.$router.push({name:'index'})
this.$router.push({path:'/index'})

3. this.$router.replace()
使用法はthis.$router.push()と同様に、pushの効果はジャンプであり、replaceは非ジャンプと理解され、現在のルーティングアドレスを置き換えることができる.
ルーティング構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.replace('/index')
this.$router.replace({name:'index'})
this.$router.replace({path:'/index'})

4. this.$router.go(n)
n個のページを前または後ろにジャンプし、nは正の整数または負の整数nが正の整数であれば、前にジャンプnが負の数であれば、後ろにジャンプする
二.パラメトリックルーティングジャンプ
1. router-link
1.1. params伝参
ルーティングpathパラメータを構成しないで、初めてパラメータの取得を要求することができて、ページをリフレッシュして、伝達されたパラメータは消えます
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

ルーティングpathパラメータを構成し、ページをリフレッシュすると、送信されたパラメータが保持されます.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

パラメータをとる
2つの方法:htmlページ直接使用:$route.params.id scriptパラメータ:this.$route.params.id

export default {
    data(){
        return{
            linkOne:0
        }
    },
    mounted(){
        this.linkOne=this.$route.params.id
    },
}

1.2. query伝参
ルーティングpathパラメータは構成せずにページをリフレッシュでき、送信されたパラメータは消えません.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

パラメータをとる
2つの方法:htmlページ直接使用:$route.query.id scriptパラメータ:this.$route.query.id

export default {
    data(){
        return{
            linkOne:0
        }
    },
    mounted(){
        this.linkOne=this.$route.query.id
    },
}

2. this.$router.push()
2.1. params伝参
ルーティングpathパラメータを構成しないで、初めてパラメータの取得を要求することができて、ページをリフレッシュして、伝達されたパラメータは消えます
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.push({name:'index',params: {id:'1'}})

ルーティングpathパラメータを構成し、ページをリフレッシュすると、送信されたパラメータが保持されます.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.push({name:'index',params: {id:'1'}})

パラメータをとる
2つの方法:htmlページ直接使用:$route.params.id scriptパラメータ:this.$route.params.id

export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.params.id
    },
}

2.2. query伝参
ルーティングpathパラメータは構成せずにページをリフレッシュでき、送信されたパラメータは消えません.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.push({name:'index',query: {id:'1'}})

パラメータをとる
2つの方法:htmlページ直接使用:$route.query.id scriptパラメータ:this.$route.query.id

export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.query.id
    },
}

3. this.$router.replace()
使用法はthis.$router.push()と同様に、pushの効果はジャンプであり、replaceは非ジャンプと理解され、現在のルーティングアドレスを置き換えることができる.
3.1. params伝参
ルーティングpathパラメータを構成しないで、初めてパラメータの取得を要求することができて、ページをリフレッシュして、伝達されたパラメータは消えます
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.replace({name:'index',params: {id:'1'}})

ルーティングpathパラメータを構成し、ページをリフレッシュすると、送信されたパラメータが保持されます.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.replace({name:'index',params: {id:'1'}})

パラメータをとる
2つの方法:htmlページ直接使用:$route.params.id scriptパラメータ:this.$route.params.id

export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.params.id
    },
}

3.2. query伝参
ルーティングpathパラメータは構成せずにページをリフレッシュでき、送信されたパラメータは消えません.
ルーティングパラメータ構成

{ path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

ルーティングジャンプ

this.$router.replace({name:'index',query: {id:'1'}})

パラメータをとる
2つの方法:htmlページ直接使用:$route.query.id scriptパラメータ:this.$route.query.id

export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.query.id
    },
}