vue全家桶（2.3）

ul,li{margin:0;填充：0；list-style:none;}.nav{height:230px;}.navli{float:left;宽度：200px；高度：200px；左边距：10px；行高：200px；文本对齐：居中；字体大小：20px；颜色：暗青色；}.navlia{颜色：白色；文字修饰：无；显示：块；宽度：200px；高度：200px；/*背景颜色：暗青色；*/}.vip-active-class{background-color:blueviolet;}3.4.嵌套路由现实生活中的应用界面通常由多层嵌套的组件组成。同理，URL中的每一段动态路径也按照一定的结构对应每一层嵌套的组件，例如：我们来看下面更直观的嵌套图：接下来我们需要实现如下核心代码:1.需要在vip组件中添加嵌套代码ul,li{margin:0;填充：0；list-style:none;}.nav{height:230px;}.navli{float:left;宽度：200px；高度：200px；左边距：10px；行高：200px；文本对齐：居中；字体大小：20px；颜色：暗青色；}.navlia{颜色：白色；文字修饰：无；显示：块；宽度：200px；高度：200px；/*背景颜色：暗青色；*/}.vip-active-class{background-color:blueviolet;}2.在路由配置文件中，需要为vip配置children字段importVuefrom'vue'importVueRouterfrom'vue-router'importCoursefrom'@/components/Course'importVipfrom'@/components/Vip'importQuestionsfrom'@/components/Questions'importHomefrom'@/components/Home'importOnefrom'@/components/One'import两个来自'@/components/Two'导入三个来自'@/components/Three'Vue.use(VueRouter)constrouter=newVueRouter({linkActiveClass:'nav-active',routes:[{path:'/',component:Home},{path:'/questions',component:Questions},{path:'/vip',component:Vip,children:[{path:'one',component:One},{path:'two}',组件：两个},{path:'three',component:Three}]},{path:'/course',component:Course}]})exportdefaultrouter#3.5.命名路由和命名视图#3.5.1。命名路由有时，通过名称来标识路由会更方便，尤其是在链接路由或执行一些跳转时。通俗地说，命名路由就是使用name属性给路由起一个名字。例如：1.给'/questions'取一个名字'wenda'constrouter=newVueRouter({linkActiveClass:'nav-active',routes:[{path:'/',component:Home},{path:'/questions',name:'wenda',//注意这里的name取值wendacomponent:Questions},{path:'/vip',component:Vip,children:[{path:'one',component:One},{path:'two',component:Two},{path:'three',component:Three}]},{path:'/course',component:Course}]})2.使用这个名称属性<模板>

• Home
• course
• vip
• 问答