javascript - 使用vue-router+webpack开发时，子组件的路由应该写在哪里？
本文介绍了javascript - 使用vue-router+webpack开发时，子组件的路由应该写在哪里？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
App.vue
<template>
<div class="headband"></div>
<main id="app">
<profile></profile>
<content></content>
</main>
</template>
<script>
import profile from './components/profile.vue'
import content from './components/content.vue'
export default {
data: function () {
return {
title:''
}
},
components: {
'profile':profile,
'content':content
}
}
</script>
content.vue
<template>
<div id="content">
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import contentHome from './content-home.vue';
var content = Vue.extend({
data: function () {
return {
title:''
}
}
}
});
Vue.use(VueRouter);
var router = new VueRouter();
router.map({
'/home': {
name:'home',
component: contentHome
}
});
router.start(content, '#content');*/
export default content
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blog demo</title>
<link rel="stylesheet" type="text/css" href="src/font-awesome.min.css">
</head>
<body>
<app></app>
<script src="dist/main.js"></script>
</body>
</html>
main.js
import Vue from 'vue';
import App from './App';
new Vue({
el: 'body',
components: {
app: App
}
});
结果无法渲染，子组件content的路由应该是在main.js中写还是子组件自己的script里写？我在main.js中写也无法渲染。入口的index.html是没有router-view标签的，只有子组件content中才有。
解决方案
花了几个小时终于弄懂了。
首先如果你的html模板是
<body>
<app></app>
<script src="dist/main.js"></script>
</body
router.start(App,'app')；
这一个函数的第二个参数只能是函数运行时html里已经存在的元素时，所以在上面的模板中入口文件main中如果用这个函数那么第二个参数只能是app，即使app组件中之后可能会渲染出其他的组件。类似的如果模板里是
<div id=app><div>
那么可以填'#app'
其次，执行这条指令后，vue会在你指定的标签完全渲染后中寻找dom层级最高的那一个<router-view>标签进行映射，然后忽略其他的<router-view>标签。
例子：假设如果你有一个这样的组件树
App
|<router-view></router-view> //1
|<router-view></router-view> //2
|A组件
|<router-view></router-view> //3
|B组件
|...
|C组件
|...
那么在入口文件中执行router.start(App,'app')，app标签在被App组件完全渲染后，只有第1个<router-view>会按之前你设定的映射进行渲染。
如果想让1和3号<router-view>都渲染。
可以在App组件选项对象的ready钩子函数中使用路由，这时候再用
var router2=new Vuerouter();
router.map({你需要的映射关系});
router2.start(A组件,'A组件**渲染后的**标签选择器')；
就可以实现上面的需求了，因为这时候A组件渲染后的标签选择器在App ready时是可以找到的。
这是我的理解，欢迎指正
这篇关于javascript - 使用vue-router+webpack开发时，子组件的路由应该写在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
