页面左边是动态加载的菜单,右边是显示区域,页面刚打开的时候,需要根据左边动态加载的菜单,来显示相应的内容在右边,
比如页面路由是 ‘/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没有变化就可以了。