vue.js - vue router redirect 动态重定向问题

问题描述

问 题

页面左边是动态加载的菜单，右边是显示区域，页面刚打开的时候，需要根据左边动态加载的菜单，来显示相应的内容在右边，
比如页面路由是 ‘/news’，需要动态根据第一个菜单的id来去加载右边的内容‘/news/list/21327c52-3f64-11e7-b0b8-00163e1a2f71’，

<div class="left">

<ul>
  <li v-for="(item,index) in items">
    <router-link :to="'/news/list'+ item.id">{{item.title}}</router-link>
  </li>
</ul>

</div>

<div class="right">

<router-view name="newsView"></router-view>

</div>

路由是
{
path: '/news',
component:...,
//redirect: '/news/21327c52-3f64-11e7-b0b8-00163e1a2f71',
children:[{

  path: '/news/list/:id',
  components:....
},{
  path: '/news/datail/:id',
  components:....
}]

}
我的处理是在mounted中加载菜单数据成功时，获取第一个菜单的id，然后this.$router.push到路由中去显示第一个菜单内容，'/news/list/21327c52-3f64-11e7-b0b8-00163e1a2f71'
，但是这样问题太多了。
我在官网上有看到说redirect 动态重定向，但是不知道怎么用

解决方案

这里没看明白你需要解决的问题。
你在点击其他菜单加载数据的之后，刷新页面，此时页面会调用mounted中的代码，更新了你菜单的id此时的id是第一菜单的id，因为这里id的变化，所以会先加载当前页，再加载第一个菜单的页面。
在构建单页面应用的时候，提问，温馨提示请勿使用当前页来描述你的问题。
你的需求是刷新页面路由依然是显示你刷新之前的页面吗?这个时候你只要保证你刷新页面之后的id没有变化就可以了。

这篇关于vue.js - vue router redirect 动态重定向问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！