VUE组件切换实现的方式
方法一: v-for
<a @click='change("one")'>aaa组件</a>
<a @click='change("two")'>bbb组件</a>
<a @click='change("three")'>ccc组件</a>
<ul>
<li v-if='com_name=="one"'></li>
<li v-if='com_name=="two"'></li>
<li v-if='com_name=="three"'></li>
</ul>
方法二: v-show
<a @click='change("one")'>aaa组件</a>
<a @click='change("two")'>bbb组件</a>
<a @click='change("three")'>ccc组件</a>
<ul>
<li v-show='com_name=="one"'></li>
<li v-show='com_name=="two"'></li>
<li v-show='com_name=="three"'></li>
</ul>
方法三: 动态组件——component
<button @click='currentCom="HelloWorld"'>hello</button>
<button @click='currentCom="student"'>student</button>
<button @click='currentCom="teacher"'>teacher</button>
<!-- 动态组件 -->
<!-- <component :is="currentCom"></component>
方法四: 路由 ——vue-router ( 嵌套路由)-以下介绍在项目中使用路由的方法
1.安装vue-router
cnpm install vue-router
2.创建组件 --在components文件中新建.vue的文件
比如: student.vue
3.定义路由
– 创建router文件夹
– 新建文件:index.js
1>,使用import 引入vue+vue-router
2>,引入组件
3>,Vue.use(Router)
4>,export default new Router({
mode
routes:[]
})
4.注入
main.js:
import router from ''
new Vue({
el
data
router
})
5.使用
<router-link></router-link>
<router-view></router-view>