vue-router 2.0 常用基础知识点之router.push()

最新推荐文章于 2024-01-28 16:51:17 发布

keep789

最新推荐文章于 2024-01-28 16:51:17 发布

阅读量398

点赞数

分类专栏： Vue 文章标签： router.push

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中使用Router进行导航的方法，包括如何利用<router-link>组件创建导航链接，以及如何通过编程式导航router.push和router.replace方法实现页面跳转。文中还解释了如何传递参数和查询字符串，以及如何使用replace属性避免在历史记录中添加新的条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router.push(location)

http://www.jianshu.com/p/ee7ff3d1d93d

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to=”…”> 等同于调用 router.push(…)。

声明式：<router-link :to=”…”>
编程式：router.push(…)
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。


// 字符串
router.push('home')
 
// 对象
this.$router.push({<span class="hljs-string" style="color:rgb(42,161,152);">path:</span> <span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'/login?url='</span></span> + <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$route.path});</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment" style="color:rgb(147,161,161);"><span class="hljs-comment">// 命名的路由</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">router.push({ <span class="hljs-string" style="color:rgb(42,161,152);">name:</span> <span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'user'</span></span>, <span class="hljs-string" style="color:rgb(42,161,152);">params:</span> { <span class="hljs-string" style="color:rgb(42,161,152);">userId:</span> <span class="hljs-number" style="color:rgb(42,161,152);"><span class="hljs-number">123</span></span> }})</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment" style="color:rgb(147,161,161);"><span class="hljs-comment">// 带查询参数，变成/backend/order?selected=2</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// 设置查询参数
this.$http.post(<span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'v1/user/select-stage'</span></span>, {<span class="hljs-string" style="color:rgb(42,161,152);">stage:</span> stage})</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      .then(({<span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-keyword">data</span>:</span> {code, content}}) =&gt; {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">if</span></span> (code === <span class="hljs-number" style="color:rgb(42,161,152);"><span class="hljs-number">0</span></span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment" style="color:rgb(147,161,161);"><span class="hljs-comment">// 对象</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$router.push({<span class="hljs-string" style="color:rgb(42,161,152);">path:</span> <span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'/home'</span></span>});</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }<span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">else</span></span> <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">if</span></span>(code === <span class="hljs-number" style="color:rgb(42,161,152);"><span class="hljs-number">10</span></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-comment" style="color:rgb(147,161,161);"><span class="hljs-comment">// 带查询参数，变成/login?stage=stage</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$router.push({<span class="hljs-string" style="color:rgb(42,161,152);">path:</span> <span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'/login'</span></span>, <span class="hljs-string" style="color:rgb(42,161,152);">query:</span>{<span class="hljs-string" style="color:rgb(42,161,152);">stage:</span> stage}});</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">           }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">});</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment" style="color:rgb(147,161,161);"><span class="hljs-comment">// 设计查询参数对象</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">let queryData = {};</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$route.query.stage) {
    queryData.stage = this.$route.query.stage;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$route.query.url) {
    queryData.url = this.$route.query.url;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$router.push({path: '/my/profile', query: queryData});

replace

类型: boolean
默认值: false
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
//加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。


this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写：
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)

综合案例

this.$router.push({<span class="hljs-string" style="color:rgb(42,161,152);">path:</span> <span class="hljs-string" style="color:rgb(42,161,152);"><span class="hljs-string">'/coach/'</span></span> + <span class="hljs-keyword" style="color:rgb(133,153,0);"><span class="hljs-keyword">this</span></span>.$route.params.id, query: queryData});