组件的定义调用+路由跳转

痛定思痛。 2022-12-24 02:52 174阅读 0赞

# 组件的定义调用+路由跳转 #

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人

--------------------

### 文章目录 ###

*  组件的定义调用+路由跳转
 *  一、组件的调用
 *  二、路由定义及跳转

--------------------

# 一、组件的调用 #

<template>
     //这里写html 界面显示
    </template>
    
    <script>
    
    
    export default { 
      name: 'Home',
    //这里写数据及逻辑代码
    }
    </script>
    
    <style scoped>
    //这里写界免样式
    </style>
    
    //调用组件在App.vue中调用
    <template>
      <div id="app">
        <Nav />
      </div>
    </template>
    
    <script>
    import Nav from './views/Nav' //使用
    
    export default { 
      data(){ 
        return { 
    
        }
      },
      components:{ 
        Nav   //组件名:引入的组件
      }
    }
    
    </script>
    <style>
     @import './assets/css/index.css' ; //引入样式文件
     #app { 
       height: 100%;
     }
    </style>

# 二、路由定义及跳转 #

//路由的定义
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter) 
    
    const routes = [
      { 
        path: '/',
        name: 'Home',
        component: Home
      },
      { 
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      { 
        path: '/tab',
        name: 'tab',
        component: () => import('../views/Tab.vue')
      },
      { 
        path: '/banner',
        name: 'banner',
        component: () => import('../views/Banner.vue')
      },
      { 
        path: '/chart',
        name: 'chart',
        component: () => import('../views/Chart.vue')
      }
    ]
    
    const router = new VueRouter({ 
      //跳转路由的样式修改
      linkActiveClass:'active',
      routes
    })
    export default router   //最后导出router
    
    //导航 router-link :to="v.url" 跳转路由
    <template>   
        <div class="tree" >
    		<ul>
    			<li class="p_item" v-for="(v,i) in items" :key="i">
    				<router-link :to="v.url" class="p_title" >
    					<i class="iconfont" :class="v.icon"></i>{ { v.name}}
    				</router-link>
    			</li>
    		</ul>
       </div>
    </template>
    
    <script>
    export default { 
      name: 'Home',
      data(){ 
          return { 
            n:1,
            items:[
                { 
                    name:'Tab切换',
                    icon:'icon-yonghu',
                    url:'/tab'  //找到路由的地址 显示组件
                },
                { 
                    name:'轮播图',
                    icon:'icon-licai',
                    url:'/banner'
                },
                { 
                    name:'图表展示',
                    icon:'icon-jia',
                    url:'/chart'
                    
                }
            ]
          }
      }
    }
    </script>
    
    <style scoped>
    .active { 
        color: #f60;
        border-bottom: 1px solid #f60;
    }
    </style>
    //路由一定要有一个出口 <router-view /> 
    <template>
      <div id="app">
        
        <Nav />
        
        <div>
          
          <router-view />   
        </div>
      </div>
    </template>
    
    <script>
    import Nav from './views/Nav'
    
    export default { 
      data(){ 
        return { 
    
        }
      },
      components:{ 
        Nav
      }
    }
    
    </script>
    <style>
     @import './assets/css/index.css' ;
     #app { 
       height: 100%;
     }
    </style>

总结:  
跳转路由 :router-link :to=“v.url”  
路由一定要有一个出口 :router-view  
跳转路由的样式修改: linkActiveClass:‘active’,