vue全家桶（2.2）

.page{宽度：100%;背景色：黑色；白颜色;文本对齐：居中；字体大小：20px；高度：60px；line-height:60px;}ul,li{margin:0;padding:0;}ul{margin-left:200px;溢出：隐藏；}li{列表样式：无；float:left;}lia{padding:20px30px;白颜色;字体大小：14px；text-decoration:none;}lia:hover{background-color:orangered}3.3.路由器链路配置#3.3.1。实例需求：实现如下效果，点击不同的菜单显示不同的文字核心代码：App组件script>exportdefault{name:'App',components:{}}.page{宽度：100%;背景色：黑色；白颜色;文本对齐：居中；字体大小：20px；高度：60px；line-height:60px;}ul,li{margin:0;padding:0;}ul{margin-left:200px;溢出：隐藏；}li{列表样式：无；float:left;}lia{padding:20px30px;白颜色;字体大小：14px；text-decoration:none;}lia:hover{background-color:orangered}路由配置：index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'@/components/Home'importCoursefrom'@/components/Course'importQuestionfrom'@/components/Question'importVipfrom'@/components/Vip'//让vue-router作为Vue插件使用Vue.use(VueRouter)//配置路由信息constrouter=newVueRouter({routes:[{path:'/',component:Home},{path:'/course',component:Course},{path:'/vip',component:Vip},{path:'/question',component:Question}]})导出默认路由器#3.3。2.使用Router-link实现跳转核心代码：App组件.page{width:100%;background-color:black;color:white;text-align:center;font-size:20px;height:60px;line-height:60px;}ul,li{margin:0;padding:0;}ul{margin-left:200px;overflow:hidden;}li{list-style:none;float:left;}lia{padding:20px30px;color:white;font-size:14px;text-decoration:none;}lia:hover{background-color:orangered}#3.3.3.router-link的其他配置1.可以动态绑定设置可变核心代码2.默认路由链接生成是一个标签，可以改成其他标签，用标签设置3.设置router-link的激活方式第一种方式是全局配置一个linkActiveClass//配置路由信息constrouter=newVueRouter({//设置激活样式linkActiveClass:'nav-active',routes:[{path:'/',component:Home},{path:'/course',component:Course},{path:'/vip',component:Vip},{path:'/question',component:Question}]})第二种方式是直接在router-link中添加active-class