2、编程式导航 router.push(……) ...">
美文网首页
Vue-Router 导航

Vue-Router 导航

作者: 海贼王Lorrin | 来源:发表于2021-07-20 17:37 被阅读0次

    1、声明式导航 <router-link :to="……" />

    2、编程式导航 router.push(……)

    两者效果一致,放置位置不一样

    router-link在UI部分<template>中实现

    router.push可在任意<script>中调用,比较灵活,该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

    // 字符串router.push('home')

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

    // 命名的路由router.push({name:'user',params:{userId:'123'}})

    // 带查询参数,变成 /register?plan=privaterouter.push({path:'register',query:{plan:'private'}})

    注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:

    const userId='123'

    router.push({name:'user',params:{userId}})// -> /user/123

    router.push({path:`/user/${userId}`})// -> /user/123// 这里的 params 不生效router.push({path:'/user',params:{userId}})// -> /user

    同样的规则也适用于 router-link 组件的 to 属性。

    相关文章

      网友评论

          本文标题:Vue-Router 导航

          本文链接:https://www.haomeiwen.com/subject/jqjrmltx.html