怎么在组件中遍历数组来循环创建路由
怎么在组件中遍历数组来循环创建路由
就是这里的音乐123列表怎么用v-for遍历出来，props该在哪绑定啊
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test3title>
<script src="./js/vue.js">script>
<script src="./js/vue-router.js">script>
head>
<body>
<div id="app">
<p>
<span v-for="item in msg">
<router-link :to="item.path">{{item.name}}router-link>
span>
p>
<router-view>router-view>
div>
<script :music="music">
//1.定义组件
let msg = {
template: `
<div>
<router-view>router-view>
div>
`
}
let music = {
template: `
<table>
<td>
<tr>
<router-link to="/music/1">音乐1router-link>
tr>
<tr>
<router-link to="/music/2">音乐2router-link>
tr>
<tr>
<router-link to="/music/3">音乐3router-link>
tr>
td>
<td>
<router-view>router-view>
td>
table>
`
}
let movie = {
template: `
<table>
<td>
<tr>
<router-link to="/movie/1">电影1router-link>
tr>
<tr>
<router-link to="/movie/2">电影2router-link>
tr>
<tr>
<router-link to="/movie/3">电影3router-link>
tr>
td>
<td>
<router-view>router-view>
td>
table>
`
}
let news = {
template: `
<table>
<td>
<tr>
<router-link to="/news/1">新闻1router-link>
tr>
<tr>
<router-link to="/news/2">新闻2router-link>
tr>
<tr>
<router-link to="/news/3">新闻3router-link>
tr>
td>
<td>
<router-view>router-view>
td>
table>
`
}
let model = {
template: `
<table>
<tr>
内容ID：{{$route.params}}
tr>
table>
`
}
//2.定义路由并创建router实例
let router = new VueRouter({
routes: [{
//动态路径参数，以英文冒号开头
path: '*',
component: msg,
children: [{
path: '/music*',
component: music,
children: [{
path: '/music/:id',
component: model,
}]
}, {
path: '/movie*',
component: movie,
children: [{
path: '/movie/:id',
component: model,
}]
}, {
path: '/news*',
component: news,
children: [{
path: '/news/:id',
component: model,
}]
}]
}]
})
//3.创建根实例，注入路由
new Vue({
data: {
msg: [{
name: '音乐',
path: '/music'
}, {
name: '电影',
path: '/movie'
}, {
name: '新闻',
path: '/news'
}, ],
music: [{
id: 1,
name: '流行音乐',
value: '流行音乐内容',
path: '/music/1'
}, {
id: 2,
name: '摇滚音乐',
value: '摇滚音乐内容',
path: '/music/2'
}, {
id: 3,
name: '古典音乐',
value: '古典音乐内容',
path: '/music/3'
}, ],
movie: [{
id: 1,
name: '热门电影',
value: '热门电影内容',
path: '/movie/1'
}, {
id: 2,
name: '经典电影',
value: '经典电影内容',
path: '/movie/2'
}],
news: [{
id: 1,
name: '娱乐新闻',
value: '娱乐新闻内容',
path: '/news/1'
}, {
id: 2,
name: '国内新闻',
value: '国内新闻内容',
path: '/news/2'
}, {
id: 3,
name: '国外新闻',
value: '国外新闻内容',
path: '/news/3'
}, ],
},
router
}).$mount('#app')
script>
body>
html>
- 这篇博客: 自定义指令v-xxx不起作用（指令函数没有被调用）；打开页面或跳转到页面自动聚焦输入框中的 二、原因1 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
1.看了好几遍都觉得自己没有问题。在directives中添加console语句后,才发现focus指令根本没有被调用
2.折腾了半天,发现其他人实现这个功能时用的是 inserted ,把 mounted 改成了 inserted，居然成功了。
3.Vue3中根本没有inserted这个东西，怎么就可以了？仔细查看文档后发现, Vue2中有inserted这个东西，没有mounted这个钩子函数。Vue2和Vue3中自定义指令的钩子函数不同。因为接手的项目是基于Vue2的，所以用mounted是无效的。