Vue-Router 导航

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 属性。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 路由实现的方式 声明式。<router-link :to="..."> 编程式。router.push(...) ...
    SailingBytes阅读 4,785评论 1 3
  • 学习目的 学习Vue的必备技能,必须 熟练使用 Vue-router,能够在实际项目中运用。 Vue-rout...
    _1633_阅读 92,550评论 3 58
  • 路由是vue进行“页面跳转”的实现方式,而vue-router是vue的一个路由组件。https://router...
    de_self阅读 2,415评论 0 1
  • Vue-router学习指南 日记:本文按照vue-router官网的知识结合例子进行分析和讲解,搭建工具(vue...
    sunny519111阅读 5,305评论 0 6
  • 一、动态路由匹配 形如: 后面的值就是动态匹配的参数,真正的路由值跳转到冒号之前的路径中,:后的值在this.$r...
    上学威龙_阅读 4,037评论 0 1