javascript - Vue里v-for和router-link :to无法配合使用
本文介绍了javascript - Vue里v-for和router-link :to无法配合使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
现在有一个需求,就是从后台加载一个menu列表,类似下面代码里这种结构
但是这些列表又和内容区需要展示的数据相关,也就是说我想利用每个菜单里的url属性来设计一个路由,然后调用相应的组件,然后再在组件里发送请求.
但是现在卡在第一步了. 就是点击了菜单之后,不仅组件没调用,而且地址栏中也出现了bug,请问我应该如何实现这个需求? (就是想直接在路由中配置出类似 AA/BB/CC 3层结构的映射关系,如果只有AA的话就没问题了.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <h1>Hello App!</h1>
<p>
<router-link to="/user/foo/post/123">Go to Foo</router-link>
<router-link to="/user/bar/post/456">Go to Bar</router-link>
</p>
<router-view></router-view> -->
<ul class="sidebar-menu" v-if="menu">
<li class="treeview" v-for="item in menu.data" >
<a href="#">
<i :class="item.icon"></i> <span>{{item.name}}</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu" v-show="item.submenu&&item.submenu.length>0">
<li v-for="subitem in item.submenu" >
<!-- <a :href="'#/'+subitem.url"> -->
<router-link :to="subitem.url">
<i :class="subitem.icon"></i>{{subitem.name}}
<span class="pull-right-container" v-show="subitem.submenu.length>0">
<i class="fa fa-angle-left pull-right"></i>
</span>
<!-- </a> -->
</router-link>
<ul class="treeview-menu" v-show="subitem.submenu&&subitem.submenu.length>0">
<li v-for="subsubitem in subitem.submenu">
<a :href="subsubitem.url">
<i :class="subsubitem.icon"></i>{{subsubitem.name}}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<template id='user'>
<p>User:{{ $route.params.type }}</p>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const User = {
template:'#user',
watch:{
'$route'(to,from){
console.log('从'+from.params.type+'到'+to.params.type);
}
}
};
//创建路由实例 (可设置多段路径参数)
const router = new VueRouter({
routes:[
{ path: '/users/:id', component: User,
children: [
{
//这里出现了问题!!
path: 'userinfo',
component: User
},
{
path: 'posts',
component:User
}
]
}
]
});
//3. 创建和挂载根实例
const app = new Vue({
data:{
menu:{
"data":[
{
"id":1,
"name":"用户管理1",
"url":"",
"icon":"fa fa-circle-o",
"submenu":[
{
"id":2,
"name":"用户概览",
"url":"users/AdminUsers/userinfo",
"icon":"fa fa-home",
"submenu":[]
},
{
"id":3,
"name":"用户管理3",
"url":"users/AdminNote/myNoteLists",
"icon":"fa fa-circle-o",
"submenu":[]
}
]
},
{
"id":4,
"name":"用户管理4",
"url":"",
"icon":"fa fa-home",
"submenu":[
{
"id":5,
"name":"用户管理5",
"url":"#5",
"icon":"fa fa-circle-o",
"submenu":[]
},
{
"id":6,
"name":"用户管理6",
"url":"#6",
"icon":"fa fa-home",
"submenu":[
{
"id":7,
"name":"用户管理7",
"url":"",
"icon":"fa fa-home",
"submenu":[
{
"id":7,
"name":"用户管理7",
"url":"#7",
"icon":"fa fa-circle-o",
"submenu":[]
},
{
"id":7,
"name":"用户管理7",
"url":"#7",
"icon":"fa fa-home",
"submenu":[]
}
]
}]
}
]
}
]}
}, router:router }).$mount('#app');
</script>
</body>
</html>解决方案
你的url值采用的是相对路径，换成绝对路径就可以了，或者使用具名路由去代替直接指定path
这篇关于javascript - Vue里v-for和router-link :to无法配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
