[深圳|结业弟子]JS-黄俊杰|2019年11月30日的日报-技能树.IT修真院

发表于： 2019-11-30 22:10:02

1 1273

今天完成的事

看了下关于路由方面

什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。

web中，路由的概念也是类似，根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)

使用vue.js构建项目，vue.js本身就可以通过组合组件来组成应用程序；当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使用渲染。

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。

创建vue项目，执行vue init webpack projectName命令，默认安装vue-router。项目创建后，在主组件App.vue中的HTML部分：

   <template>
        <div id="app">
            <!--路由出口，路由匹配到的组件将渲染在这里-->
            <router-view/>
        </div>
    </template>

文件router/index.js中：

import Vue from 'vue' // 导入vue插件
import Router from 'vue-router' // 导入vue-router
import HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件
 
Vue.use(Router) // 引入vue-router
export default new Router({
    routes: [
        {
            path: '/', // 匹配路由的根路径
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

Vue.use()具体什么作用

“Vue.use(plugin, arguments)就是执行一个plugin函数，或执行plugin的install方法进行插件注册(如果plugin是一个函数，则执行；若是一个插件，则执行plugin的install方法...)；并向plugin或其install方法传入Vue对象作为第一个参数；如果有多个参数，use的其它参数作为plugin或install的其它参数”

其实不是很理解↑

遇到的问题

看文档看的不是很懂，感觉还是需要看视频跟着敲比较容易理解一些。

明天的计划