vue 单页跳转方式大全

vue 单页跳转方式大全

方法一

来实现导航的功能，当点击导航菜单的时候，会切换 home.vue 中 中的内容

<template>
    <router-link to="/ref">ref</router-link>
    <hr>
    <router-link to='/slot/666'>ref</router-link>
    <hr>
    <router-link to='/slot'>ref</router-link>
    <hr>
    
</template>

在rooter.js里面

const routers= [
{ path :'/ref' ,component :RefTest,
children : [//嵌套路由
    { path :'/slot' ,component :SlotText}]
},
    { path :'/slot' ,component :SlotText },
    { path :'/redididi' ,redirect:'/' },
    { path :'/slot/:id' ,component :SlotText ,props: true},

]

方法二 编程式导航

实际情况下，有很多按钮在执行跳转之前，还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转
push 后面可以是对象，也可以是字符串：

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})