vue组件切换的实现方式

Vue Router

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

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激活状态的类名，当点击谁，谁就是激活状态，一般用于，点击以后样式变为和其它的不一样的样式，以展示当前组件被选中了；

最后

以上就是多情鲜花为你收集整理的vue组件切换的实现方式的全部内容，希望文章能够帮你解决vue组件切换的实现方式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。