组件与路由创建过程

最新推荐文章于 2022-12-04 07:19:49 发布

m0_59610375

最新推荐文章于 2022-12-04 07:19:49 发布

阅读量192

点赞数

分类专栏：组件与路由文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_59610375/article/details/120003484

版权

组件与路由专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了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类库

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：注意事项

路由嵌套问题：

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

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

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