vue组件切换的实现方式

Vue Router

用Vue.js+Vue Router创建单页面应用，是非常简单的。每个页面展示的都是一个组件，通过各个组件组成了应用程序，但是我们怎么找到对应的组件，这时候路由就发挥了作用，将组件映射到路由里，然后告诉Vue Router在哪里渲染。
单页面点击切换的是组件，如何实现组件切换？
1.动态组件，利用is属性；
例如：

意思是div不再是div而是渲染成为component组件，is可以指定渲染的组件名，使用is的标签，如果没有样式，直接会被组件替换了，不再显示div元素，成为组件。 一般为了语义化，使用vue提供的component标签

2.路由
路由的主要功能是监听地址的改变，根据改变来渲染不同的组件；
路由，vue本身没有，在一个模块化工程中使用它需要:
(1)下载安装路由 npm install vue-router
(2)创建路由表：在src新建文件router，在router里放一个router.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import son1 from “./son1”
import son2 from" son2"
Vue.use(VueRouter);//必须要通过 Vue.use() 明确地安装路由功能
let router=new VueRouter({
routes:[
{path:‘son1’,component:son1},
{path:‘son2’,component:son2}
]
})
export default router
(3)在main.js里注册路由，这时候就可以使用两个组件router-link和router-view;router-link是控制地址栏的改变，router-view开启一个空间渲染指定的组件

router-link

router-link默认被渲染为a标签，to表示地址栏变为什么样子
tag属性可以控制渲染为什么元素
active-class激活状态的类名，当点击谁，谁就是激活状态，一般用于，点击以后样式变为和其它的不一样的样式，以展示当前组件被选中了；