码迷,mamicode.com
首页 > 其他好文 > 详细

从零开始Vue项目实战(四)-路由

时间:2018-10-21 20:40:32      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:请求   code   项目实战   配置   路由   const   path   dom   ali   

一、理解路由

传统的页面应用,是用一些超链接来实现页面切换和跳转的。而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。

路由中有三个基本的概念 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中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分,<router-view> 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:<router-link  to="/home">Home</router-link>

  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 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。

三、设置路由

 

从零开始Vue项目实战(四)-路由

标签:请求   code   项目实战   配置   路由   const   path   dom   ali   

原文地址:https://www.cnblogs.com/dreamingbaobei/p/9826553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!