VUE组件切换实现的方式

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>