【LSP】vue-router 基本使用

896452247   ·   发表于 1970-1-19   ·   编程代码

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。

  点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

  路由中有三个基本的概念 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 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

  vue-router中的路由也是基于上面的内容来实现的

  在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。

  1, 页面实现(html模版中)

    在vue-router中, 我们看到它定义了两个标签来对应点击和显示部分。 就是定义页面中点击的部分, 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:Home

  2, js 中配置路由

    首先要定义route, 一条路由的实现。它是一个对象,由两个部分组成: path和component. path 指路径,component 指的是组件。如:{path:’/home’, component: home}

    我们这里有两条路由,组成一个routes:

const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
  最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。

const router = new VueRouter({
routes // routes: routes 的简写
})
  配置完成后,把router 实例注入到 vue 根实例中,就可以使用路由了

const app = new Vue({
router
}).$mount('#app')
  执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 标签所在的地方。所有的这些实现才是基于hash 实现的。

vue-cli 创建一个项目体验一下, 当然不要忘记安装vue-router

  1, 在src 目录下新建两个组件,home.vue 和 about.vue

0 Reply   |  Until 10个月前 | 3779 View
LoginCan Publish Content