vue基础-day05-vue路由使用以及组件扩展

最新推荐文章于 2024-08-05 08:56:28 发布

小小穆子

最新推荐文章于 2024-08-05 08:56:28 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/m0_52618824/article/details/118277492

版权

一、Vue组件的定义

组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

二、全局定义组件和局部定义组件：

在组件中，data需要被定义为一个方法，将data设置为一个函数，而不是一个对象的原因是实现深拷贝，实现数据分离，各个数据之间相互独立，互不影响，如下图的计算器组件。``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id ="app"> 
        <course></course>
        <course></course>
        <course></course>
        <course></course>
        <!-- <login></login> -->
    </div>
    <div id="app2">
        <login></login>

    </div>

    <template id="course">
        <div>
            <div>课程组件</div>
            <div>{{num}}</div> 
            <button @click='add1'>点我加一</button>
        </div>   
    </template>

    <script>
    // 使用components属性定义全局组件
    Vue.component("course",{
        template:"#course",
        // 将data设置为一个函数，而不是一个对象的原因是实现深拷贝，实现数据分离，各个数据之间相互独立
        // 深拷贝：传值。
        data(){
            return {
                num:13,
            };
        },
        methods:{
            add1(){
                this.num++;
            },
        }
    })
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
     });

     const vm2 = new Vue({
        el: '#app2',
        data: {},
        methods: {},
        // 使用components属性定义局部组件
        components:{
            login:{
                template:"<h1>登录/注册</h1>",
                data(){
                    return {
                        num2:45,
                    }
                }
            },
        },
     });
    </script>
</body>

</html>

三、全局组件定义的四种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
<body>
    <div id ="app">
        <!-- 都是当作标签来使用 -->
        <temp1name></temp1name>
        <temp2name></temp2name>
        <temp3name></temp3name>
        <temp4name></temp4name>
    </div>


    <!-- // 方法三：书写模板id所对应得内容 -->
    <script id="num3" type="x-template">
        <!-- 只能有一个根元素 -->
        <h3>我是声明组件方法三   
            <div>第一个盒子</div>
            <div>第二个盒子</div>
        </h3>
    </script>

    <!-- // 方法四：书写模板id所对应得内容 -->
    <template id="num4">
        <div>我是声明组件方法四：最常用的方法</div>
    </template>
    <script>
        //创建Vue实例,得到 ViewModel
        
        // 方法一：使用 Vue.extend 配合 Vue.component 方法：
        // 第一步：声明组件
        let temp1=Vue.extend({
            template:"<h2>我是声明组件方法一</h2>"
        });
        // 第二步：全局注册组件:Vue.component(参数一是名字，参数二是模版)，当作标签来使用
        Vue.component("temp1name",temp1)
        
        // 方法二：直接使用 Vue.component 方法
        Vue.component("temp2name",{
            template:"<h2>我是声明组件方法二</h2>"
        })

        // 方法三:将模板字符串，定义到script标签中：添加type的属性值为x-template。
        // 定义模板
        Vue.component("temp3name",{
            template:"#num3"
        })
        
        // 方法四：最常用得方法。将模板字符串，定义到template标签中：
        Vue.component("temp4name",{
            template:"#num4",
        })
        
        // 注意：
        // 不能使用驼峰命名法
        // 不要使用内置或保留得HTML元素作为组件id"footer"
        // 只能有一个根元素
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
     });
    </script>
</body>

</html>

四、使用flag标识符结合v-if和v-else切换组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
<body>
    <div id ="app"> 
        <button @click="flag=!flag">点我切换组件生死</button>

        <login v-if="flag"></login>
        <register v-else></register>
        
        
        <!-- 使用component标签，来引用组件，并通过:is属性来指定要加载的组件： -->
        <componets is="login"> </componets>
        <!-- 也可以通过绑定data中的属性 -->
        <componets :is="name"> </componets>
        <componets is="register"> </componets>
    </div>
    <template id="login">
        <div>登录</div>
    </template>

    <template id="register">
        <div>注册</div>
    </template>
    <script>
        Vue.component("login",{
            template:"#login",
            data(){
                return {
                    
                };
            },
            methods:{},
            created(){},
            beforeDestroy() {
                console.log("我要没了");
            },
            destroyed() {
                console.log("我没了");
            },
        })
        Vue.component("register",{
            template:"#register",
            data(){
                return {
                    
                };
            },
            methods:{},
            created(){

            },
        })
     //创建Vue实例,得到 ViewModel
     const vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            name:"login"
        },
        methods: {}
     });
    </script>
</body>

</html>

五、使用:is属性来切换不同的子组件，并添加切换动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
    <style>
        /* 添加切换样式： */
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(30px);
        }
  
        .v-enter-active,
        .v-leave-active {
          position: absolute;
          transition: all 1.3s ease;
        }
        h3 {
          margin: 0;
        }
      </style>
<body>
    <div id ="app">
        <button @click="comName='login'">登录</button>
        <button @click="comName='register'">注册</button>

        <div>
            <!-- mode='out-in':设置两个字的动画，一个出另一个进，或者一个进另一个出。 -->
            <transition mode='out-in'>
                <!-- 使用component标签，来引用组件，并通过:is属性来指定要加载的组件： -->
                <components :is='comName'></components>
            </transition>
        </div>
    </div>
    <template id="login">
        <div>登录</div>
    </template>

    <template id="register">
        <div>注册</div>
    </template>
    <script>
     //创建Vue实例,得到 ViewModel
     Vue.component("login",{
            template:"#login",
            data(){
                return {
                    
                };
            },
            methods:{},
        })
        Vue.component("register",{
            template:"#register",
            data(){
                return {
                    
                };
            },
            methods:{},
            created(){

            },
        })
   
     const vm = new Vue({
        el: '#app',
        data: {
            //定义comName的数据，默认页面上显示的时登录模块。
            comName:"login"
        },
        methods: {}
     });
     
    </script>
</body>

</html>

六-1、父组件传值子组件

接受父组件传值
设置props属性就可以接受父组件传值
天亮云课堂父子传值代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云课堂一</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./vue-2.4.0.js"></script>
    <style>
        * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: red;
}
ul {
    list-style: none;
}
   /* 免费课程 */
.freeClass {
    position: relative;
    margin: 20px auto 0px;
    width: 1200px;
    text-align: center;
}
.freeClass>h2 {
    margin: 0 auto;
    width: 100%;
    height: 50px;
    font-size: 24px;
    color: #333;
    font-weight: normal;
    display: inline-block;
    border-bottom: 2px solid #e8e8e8;
}
.freeClass>a {
    position: absolute;
    /* top: 10px; */
    right: 10px;
}
.freeClass-list {
    /* overflow: hidden; */
    box-sizing: border-box;
}
.freeClass-list>li {
    float: left;
    margin-top: 20px;
    width: 20%;
    padding: 0px 10px;
    text-align: left;
    
}
.freeClass-list>li>div {
    margin-bottom: 8px;
    width: 100%;
    height: 123px;
    overflow: hidden;
}
.freeClass-list>li>div>img {
    width: 100%;
    height: 100%;
}
.freeClass-list>li>p {
    font-size: 14px;
    height: 24px;
}
.freeClass-list>li>span {
    color: #888;
}
.freeClass-list>li>p:nth-of-type(2) {
    /* height: 27px; */
    color: #00cf8c;
    font-size: 16px;
}
.freeClass-list>li>div>img:hover {
    transform: scale(1.1,1.1);
    /* transition-delay: 10s; */
  }
 
    </style>
<body>
    <div id ="app"> 
        <index></index>
    </div>

    <script>
        Vue.component("index",{
            template:"#index",
        })
    </script>
    
    <template id="index">
        <div>
            <course type="free" pagesize="10" pagenum="2">免费课程</course>
            <course type="boutique" pagesize="5" pagenum="1">精品课程</course>
            <course type="discount" pagesize="5" pagenum="3">限时折扣课程</course>
        </div>
    </template>

    <template id="course">
        <div>
            <section class="freeClass">
                <h2>
                    <!-- 普通插槽 -->
                    <slot></slot>
                </h2>
                <a href="">更多</a>
                <ul class="freeClass-list" v-for="(item,index) in courseList" :key="item.id">
                    <li>
                        <div><img class="courseImg" alt="" :src="item.coverFileUrl"></div>
                        <p>{{item.courseTitle}}</p>
                        <span>共{{item.learningNum}}节课|{{item.participationsCount}}人报名</span>
                        <p>免费</p>
                    </li>
                </ul>
            </section>
        </div>
    </template>

    <script>
        Vue.component("course",{
         template:"#course",
         data(){
            return {
            courseList: [],
          };
         },
         props:{
            //type: String
            type:[String,Number],
            pagenum: [String, Number],
            pagesize: [String, Number],
         },
         created(){
            console.log(this.type);
            console.log(this.pagenum);
            this.getCourseList(this.type,this .pagesize,this.pagenum)
         },
        //  根据不同的参数类型获取不同的课程列表
         methods:{
            getCourseList(type,pageSize,pageNum){
                let form = new FormData();
                form.append("type", type);
                form.append("pageSize", pageSize);
                form.append("pageNum", pageNum);
          axios
            .post(
              "http://wkt.myhope365.com/weChat/applet/course/list/type",
              form
            )
            .then((res) => {
              console.log(res);
              this.courseList = res.data.rows;
            });
            }
         }
     })
    </script>
    
    <script>
     //创建Vue实例,得到 ViewModelnt
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
     });
    </script>
</body>

</html>

六-2、子组件传值父组件

子组件调用父组件的方法
1>.在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
2>.子组件可以触发这个事件$emit(‘事件名字’)

子组件给父组件传递数据
1>.$emit方法第二个参数可以定义子组件给父组件传递的内容
2>.在父组件中怎么拿到这内容
a、父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
b、父组件有自定义参数，可以传入也可以(event)拿到子组件传递的数据,只能传递第一个参数。
代码示例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id ="app"> 
        <father></father>
    </div>
    <template id="father">
        <div>
            <h2>我是父组件哈哈哈哈</h2>
            <!-- 1.在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） -->
            <son @fromto='fromson'></son>
            这是子组件传过来的{{msg}}
        </div>
    </template>
    <template id="son">
        <div>
            <h2>我是子组件啊啦啦啦啦</h2>
            <button @click='tofather'>点击向父组件传值</button>
        </div>
    </template>
    <script>
     //创建Vue实例,得到 ViewModel
     Vue.component("father",{
         template:"#father",
         data(){
             return {
                 msg:"",

             };
         },
         methods:{
        //2>.父组件拿到这内容:
        // 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
        // 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。
            fromson(data){
                console.log(data);
                this.msg=data;
            }
         }
     });
     Vue.component("son",{
         template:"#son",
         data(){
             return {
                num1:1245,
             }
         },
         methods: {
            tofather(){
                console.log(66666);
                // 2.子组件触发这个事件$emit('事件名字')
                // 子组件给父组件传递数据
                // 1>$emit方法第二个参数可以定义子组件给父组件传递的内容
                this.$emit("fromto",this.num1)
            },
           
        }
     })
     const vm = new Vue({
        el: '#app',
        data: {},
     });
    </script>
</body>

</html>

七、 Vue中路由的使用：

1 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
如何使用路由
路由的基本使用:
1> 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2> 创建路由new VueRouter(),接受的参数是一个对象
3> 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4> path属性是url的地址,component属性就是显示的组件（传组件的对象）
5> 创建的路由需要和vue实例关联一下
6> 路由到的组件显示在哪个位置<router-view></router-view>
代码实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 5? 预留展示区域 -->
      <router-view></router-view>
    </div>

    <template id="son">
        <div>
             子组件
        </div>
    </template>

    <script>
        let son =  Vue.component("son",{
            template:"#son"
        })


      // 2创建实例

      const router = new VueRouter({
        // 3 .创建组件和路由映射关系
        routes: [
          {
            path: "/",
            component: Vue.component("haha", { template: "<h2>hahah</h2>" }),
          },{
              path:"/son",
              component:son
          }
        ],
      });

      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        //4. 创建联系，挂载在Vue实例上
        router,
      });
    </script>
  </body>
</html>

路由的跳转
1router-link标签可以设置to属性
2默认是a标签，可以通过tag设置包裹标签
路由重定向
redirect可以进行路由的重定向
选中路由高亮
1.使用默认的样式
直接设置router-link-active
2.自定义样式
配置 linkActiveClass:‘自定义的类名’
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
         .router-link-active{
        color: red;
        font-size: 40px;
      }
      .suibian{
        color: hotpink;
        font-size: 30px;
      }
    </style>
<body>
    <!-- 父组件  父子组件时相对的-->
    <div id ="app">
        <!-- 五.预留展示区域   路由到的组件所显示的位置-->
        <router-view></router-view>
    </div>
    <template id="son">
        <div>我是子组件呀呀呀呀呀呀
            <router-link to="/son">点击去子组件</router-link>
            <router-link to="/index">点击去父组件</router-link>
        </div>
    </template>
    <template id="father">
        <div>这是首页
            <!-- 1。router-link标签可以设置to属性
            2。默认是a标签，可以通过tag设置包裹标签 -->
            <router-link to="/son">点击去子组件</router-link>
            <router-link to="/son">点击去子组件</router-link>
            <router-link to="/son" tag="div">去子组件tag改变标签</router-link>
        </div>
    </template>

    <script>
     //创建Vue实例,得到 ViewModel
     let son=Vue.component("son",{
         template:"#son",
     });
     
    //  Vue.component可以省略
     let father={
         template:"#father"
     }
    //  二.创建路由实例
     const router=new VueRouter({
        //  三.创建路由和组件的映射关系
        routes:[
            // 第一个路由和组件的映射关系
            {
                path:"/index",
                component:father,
            },
            // 第一个路由和组件的映射关系
            // redirect可以进行路由的重定向  :当为"/"定向到index页面，不用先到地址栏上拼接才能切换到index页面，
            // 如果定向的是son,那么当为"/"时，默认显示的时son的页面
            { path: "/", redirect: "/index" },
            {
                path:"/son",
                component:son,
            },

        ],
        // 1.使用默认的样式
        // 直接设置router-link-active
        //2、使用自定义样式
        linkActiveClass:"suibian"
     }) 
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //四. 创建路由实例和vue实例联系，将路由实例挂载在Vue实例上
        // router:"roeter",ES6当属性值和属性重复时可以省略
        router,
     });
    </script>
</body>

</html>

八、路由定义参数

1、通过query的方式在url后加?参数名=参数的值
获取参数：$route.query.参数名

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    </style>
<body>
    <!-- 父组件  父子组件时相对的-->
    <div id ="app">
        <!-- 5.预留展示区域   路由到的组件所显示的位置-->
        <router-view></router-view>
    </div>
    <template id="son">
        <div>我是子组件呀呀呀呀呀呀
            <router-link to="/index">点击去父组件</router-link>
            <!-- 路由传参 -->
            <router-link :to="{path:'index',query:{sondataid:888}}">点击去父组件路由传参1</router-link>
            <router-link :to="{path:'index',query:{sondata:sondataid}}">点击去父组件路由传参2</router-link>
        </div>
    </template>
    <template id="father">
        <div>这是首页
            <!-- 1。router-link标签可以设置to属性
            2。默认是a标签，可以通过tag设置包裹标签 -->
            <router-link to="/son">点击去子组件</router-link>
            <router-link to="/son" tag="div">去子组件tag改变标签</router-link>
        </div>
    </template>

    <script>
     //创建Vue实例,得到 ViewModel
     let son=Vue.component("son",{
         template:"#son",
         data(){
             return {
                 sondataid:104,
             };
         },
     });
     
    //  Vue.component可以省略
     let father={
         template:"#father",
         created(){
             console.log(this.$route);
             console.log(this.$route.query);
         }
     }
    //  2.创建路由实例
     const router=new VueRouter({
        //  3.创建路由和组件的映射关系
        routes:[
            // 第一个路由和组件的映射关系
            {
                path:"/index",
                component:father,
            },
            // 第一个路由和组件的映射关系
            // redirect可以进行路由的重定向  :当为"/"定向到index页面，不用先到地址栏上拼接才能切换到index页面，
            // 如果定向的是son,那么当为"/"时，默认显示的时son的页面
            { path: "/", redirect: "/index" },
            {
                path:"/son",
                component:son,
            },

        ],
     }) 
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //4. 创建路由实例和vue实例联系，将路由实例挂载在Vue实例上
        // router:"roeter",ES6当属性值和属性重复时可以省略
        router,
     });
    </script>
</body>

</html>

2、使用浏览器参数的方式传递参数
1>.设置路由的时候/路由地址/:参数名
2>.获取参数$route.params.参数名
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--1. 引入vuerouter -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    </style>
<body>
    <!-- 父组件  父子组件时相对的-->
    <div id ="app">
        <!-- 5.预留展示区域   路由到的组件所显示的位置-->
        <router-view></router-view>
    </div>
    <template id="son">
        <div>我是子组件呀呀呀呀呀呀
            <router-link to="/index">点击去父组件</router-link>
            <!-- 路由传参 -->
            <router-link :to="{path:'index',query:{course:888}}">点击去父组件路由传参1</router-link>
            <router-link :to="{path:'index',query:{course:courseid}}">点击去父组件路由传参2</router-link>
        </div>
    </template>
    <template id="father">
        <div>这是首页
            <!-- 1。router-link标签可以设置to属性
            2。默认是a标签，可以通过tag设置包裹标签 -->
            <!-- <router-link to="/son">点击去子组件</router-link> -->
            <router-link :to="{name:'son',params:{id:111}}">点击去子组件路由传参1</router-link>
            <router-link :to="{name:'son',params:{id:fatherdata,name:'李四'}}">点击去子组件路由传参1</router-link>
            <router-link to="/son" tag="div">去子组件tag改变标签</router-link>
        </div>
    </template>

    <script>
     //创建Vue实例,得到 ViewModel
     let son=Vue.component("son",{
         template:"#son",
         data(){
             return {
                 courseid:104,
             };
         },
         created(){
             console.log(this.$route);
             console.log(this.$route.params);
         }
     });
     
    //  Vue.component可以省略
     let father={
         template:"#father",
         data(){
            return{
                fatherdata:"666",
            }
         },
     }
    //  2.创建路由实例
     const router=new VueRouter({
        //  3.创建路由和组件的映射关系
        routes:[
            // 第一个路由和组件的映射关系
            {
                path:"/index",
                component:father,
            },
            // 第一个路由和组件的映射关系
            // redirect可以进行路由的重定向  :当为"/"定向到index页面，不用先到地址栏上拼接才能切换到index页面，
            // 如果定向的是son,那么当为"/"时，默认显示的时son的页面
            { path: "/", redirect: "/index" },
            {
                // 定义必传参数
                path:"/son/:id/:name",
                component:son,
                name:"son",
            },

        ],
     }) 
     const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //4. 创建路由实例和vue实例联系，将路由实例挂载在Vue实例上
        // router:"roeter",ES6当属性值和属性重复时可以省略
        router,
     });
    </script>
</body>

</html>

小小穆子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础-day05-vue路由使用以及组件扩展

1、Vue组件的定义组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一。组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用2、组件定义2.2 全局定义组件和局部定义组件：在组件中，data需要被定义为一个方法，将data设置为一个函数，而不是
复制链接

扫一扫