组件与路由创建过程

本文详细介绍了Vue中组件的创建,包括全局组件和局部组件的定义与使用,强调了组件化思想和注意事项,如组件的作用域和命名规范。同时,阐述了Vue路由的创建过程,包括路由跳转链接、路由占位、组件映射,以及路由嵌套、重定向等,并给出了相关注意事项,如路由标签的使用和路由嵌套的处理策略。
摘要由CSDN通过智能技术生成

#组件创建步骤及注意事项

1.1组件化思想:分治思想

即将页面展示的每一个模块设计为一个组件,组件里面还能够套组件;

组件与组件之间互不干扰

1.2组件创建步骤:

1.2.1全局组件

a.定义模板标签语言,设置id属性(见名知意),在模板标签里写入需要展示的类容,即相当于一个组件展示的类容   <template id="msgTem"></template>

b.定义组件:Vue.component(组件名称,{组件的实体类容})

Vue.component("addNumCom",{
                //属性
                data(){
                    return {
                        //自定义属性
                        num: 100
                    }
                },
                //页面标记,即模板标签,写id属性
                template: "#numTem"
            })
1.2.2局部组件

a.定义模板标签

1.template标签是组件中定义html标记的模板.
2.template标签必须有根标签div
3.template标签最好定义在body标签内部,写法方便.

b.封装组件对象

        let msgCom = { template: "#msgTem" }

c.在vue对象中定义组件,表示该组件只能在当前对象中使用,即在vue对象中加components: {组件对象}

1.3组件使用注意事项:

a. 组件的使用必须在VUE对象渲染的区域中使用.
b. 组件有全局的/有局部的.注意作用域.
c. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
d. 组件必须先定义再使用.

#路由创建及注意事项

VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

1.1路由的创建过程

a.引入JS类库

<!-- 1.引入JS 路由需要依赖vue 注意顺序-->

<script src="../js/vue.js"></script>

<script src="../js/vue-router.js"></script>

b.指定路由跳转链接

<router-link to="/home">主页</router-link>

c.指定路由填充位/占位

<router-view></router-view>

d.封装组件对象--与上面局部组件创建方式一致

1.<template id="msgTem"></template>

2.let HomeCom = { template: "#msgTem" }

e.封装路由对象,定义请求与组件的映射关系

path:请求路径,component:组件对象

let router = new VueRouter({

        //routes 定义请求与组件的映射关系

        routes: [ {path: "/home", component: HomeCom} ] })

f.vue对象绑定路由

1.2路由嵌套

即在<template id="msgTem"></template>标签原有内容后,继续添加路由路径与占位,后续一致

须注意,在请求与组件映射关系处,嵌套的路由相当于子路由,需写在父路由后面,添加children关键字:

{path: "/lion",component: lionCom, 
                        children: [
                            {path: "/lion/one",component: oneCom},
                            {path: "/lion/two",component: twoCom},
                        ],
                    }
1.3:重定向

即让页面打开时就展示固定的类容

使用redirect实现重定向效果.

即在请求与组件映射关系最前面添加:

routes:[{path: "/",redirect: "/定向的请求路径"}]

1.4:注意事项

<!-- 2.定义路由标签
                1.a标签说明
                标签说明: a标签 超链接标签
                         href属性: 请求跳转的地址
                <a href="http://www.baidu.com">百度</a>
                
                2.路由标签说明
                    router-link 解析为a标签
                    to 解析之后变成 href属性
  -->

路由嵌套问题:

1.如果需要在App根标签中跳转,则写到routes根目录下

2.如果需要进行父子嵌套,则应该使用children属性

3.如果使用children属性,则在自身的router-view展现数据

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值