组件与路由创建过程

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

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展现数据