Vue Router

编程式导航

路由跳转

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

// 根据组件名称跳转
this.$router.push({name: 'List'})

// 带参数
// params参数使用name方式跳转
this.$router.push({
    name: 'List',
    params: {
        id: id
    }
})

// query参数使用path方式跳转
this.$router.push({
    path: '/list',
    query: {
        id: id
    }
})

上一页&下一页

<button @click="go(-1)">上一页</button>
<button @click="go(1)">下一页</button>

go(step) {
    this.$router.go(step)
}

重定向

访问 /hello 时直接跳转到 /home

{
    path: '/hello',
    redirect: '/home'
}

// 跳转到指定的name
{
    path: '/hello',
    redirect: {
        name: 'Home'
    }
}

// 跳转到指定的path
{
    path: '/hello',
    redirect: {
        path: '/home'
    }
}

// 逻辑判断
{
    path: '/hello',
    redirect: () => {
		if(true) {
            return '/list'
        }
    }
}

// 逻辑判断跳转name
{
    path: '/hello',
    redirect: () => {
		if(true) {
            return {
                name: 'List'
            }
        }
    }
}

// 逻辑判断带参数
{
    path: '/hello',
    redirect: (to) => {
        console.log(to)
		if(true) {
            return '/list'
        }
    }
}

导航守卫