Vue.js系列之vue-router(中)(4)

原创 2017年01月03日 17:55:57

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。
本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

1. Vue.js系列之项目搭建(1)
2. Vue.js系列之项目结构说明(2)
3. Vue.js系列之vue-router(上)(3)


补充

对于上篇分享的router.js文件补充以下三点:

1.新建好的router.js文件要想起作用,需要在main.js中import进来。

/*引入路由设置*/
import "./routers.js"

2.如果你在options里声明了挂载的el,就不用再手动mount了

var app = new Vue({
    el: '#app',  //不需要
    router,
    render: h => h(App) //新添加的函数操作
}).$mount('#app');

3.第二点看到,我们新加了render: h => h(App) 一开始我没看懂,直接注释运行看下,结果<div id="app"></div> 这个容器里面就啥也没有渲染出来。我也不怎么理解,如果有大牛清楚的恳请留言指导一下啊。但是我还是查了一下资料。

//=> 是ES6的箭头语法
// ES5  
(function (h) {  
  return h(App);  
});  

// ES6  
h => h(App); 

官方文档说明1:

render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  }

官方文档说明2:
render
类型:Function
详细:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
我是这么理解的,我们的路由跳转时,定位到了一个组件进行渲染,但是之前app这个容器里面是有其他组件的,我们不能直接添加进去,只能把app里面的模板文件替换掉,所以用这个字符串模板的代替方案render(不知道对不对,真心请大神指出,大家这里略过吧)。

懒加载

懒加载的必要性:

1.解决样式冲突问题
2.解决页面资源加载问题
3.路由被访问时才加载对应组件,提高应用加载效率

具体代码写法

关键我们要做的就是把之前普通import进来的组件定义成异步组件。
前:

import home form "./components/home"  
import login form "./components/login" 

后:

const home = resolve => require(['./home.vue'], resolve)
const login = resolve => require(['./login.vue'], resolve)

Router构造详细配置

const router = new VueRouter({
    mode: 'history',//history: 依赖 HTML5 History API 和服务器配置。
    base: __dirname,
    linkActiveClass:'link-active',
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
    routes
}) 

mode
默认’hash’值,但是hash看起来就像无意义的字符排列,不太好看也不符合我们一般的网址浏览习惯。
当你使用 history 模式时,URL 就像正常的 url,例如 http://wx.hq88.com/lms/,也好看!

base
默认值: “/”,应用的基路径,一般就是项目的根目录,webpack中有配置好。

var projectRoot = path.resolve(__dirname, '../')

linkActiveClass
默认值: “router-link-active”,就是当前组件被激活,相应路由会自动添加类”router-link-active”,这里是为了全局设置激活类名,如果不设置,直接用默认的也是可以的。

scrollBehavior
通过这个这个属性(是个函数),可以让应用像浏览器的原生表现那样,在按下 后退/前进 按钮时,简单地让页面滚动到顶部或原来的位置。

完整路由代码

const scrollBehavior = (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }

routes: [
    {
      path: '/',
      name: 'home',
      component: function(reslove){
        return require(['./components/home'],reslove)
      }
    },
    {
      path: '/login',
      name: 'login',
      component: function(reslove){
        return require(['./components/login/login'],reslove)
      }
    }
 ]
// 创建一个路由器实例,并且配置路由规则
const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    linkActiveClass:'link-active',
    scrollBehavior,
    routes
});
//创建和挂载根实例
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app');

总结

中篇主要对上篇遗漏的点进行了补充,分享了 懒加载的实现以及Router构造详细配置,最终形成了我们项目中用的router.js。下篇我将继续分享路由知识,主要是一些小的知识点,但是在应用的过程中不可或缺。

1.当前路由添加激活状态active-class
2.路由跳转时添加过渡动效
3.路由传参及命名路由
4.编程式导航
5.router-link的其他表现形式

版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

vue-router路径计算问题

昨天刚刚发表了一个前端跨域新方案尝试,今天在开发中就遇到的了问题。http://www.jianshu.com/p/56e1500e4060 起因 前端使用的是vue-router组件的h...
  • sinat_17775997
  • sinat_17775997
  • 2017年04月23日 08:09
  • 2015

vue-router的使用及实现原理

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wi...
  • caoxinhui521
  • caoxinhui521
  • 2017年08月29日 21:35
  • 5540

vue-router总结

结合项目中的使用,学习vue-router. https://1657413883.github.io/2017/03/18/vue-router总结/ http://www.tuicool.c...
  • sinat_17775997
  • sinat_17775997
  • 2017年03月19日 18:48
  • 18469

Vue-router 官方文档笔记

vue-router个人理解:Vue中的路由相当于pc里面的锚点超链接,如果点击了页面转向哪,也有点像ajax。安装npm install vue-router 开始用Vue.js + vue-r...
  • HeliumLau
  • HeliumLau
  • 2017年03月12日 21:41
  • 8906

一个完整的vue应用 ( vuex+vue-router ) 起手

项目连接 github链接 介绍 本项目主要介绍如何使用vue+vuex+vue-router开启一个SPA应用,注重的是将应用搭建起来,所以项目不大 第一次发文,...
  • Gavid0124
  • Gavid0124
  • 2017年07月01日 18:12
  • 1992

使用Vue-Router 2实现路由功能

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-rout...
  • sinat_17775997
  • sinat_17775997
  • 2017年01月24日 21:10
  • 70386

vue-router

概念: 什么是路由 根据不同的url 加载不同的 vue 组件 什么是路由规则 在浏览器上看到的 #/xxx 就是路由规则 路由规则的几种表现形式 无参路由规则:/Home /Home/new...
  • qq_16415157
  • qq_16415157
  • 2017年01月23日 14:36
  • 2624

Vue.js——vue-router 60分钟快速入门【9】

Vue.js——vue-router 60分钟快速入门 概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue...
  • sinat_17775997
  • sinat_17775997
  • 2016年09月15日 11:15
  • 30796

Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表

Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRou...
  • FungLeo
  • FungLeo
  • 2016年11月17日 16:41
  • 19438

Vue-router2.0基础实践

1)基础用法: Hello App! 默认会被渲染成一个 `` 标签 --> Go to Foo ...
  • bboyjoe
  • bboyjoe
  • 2016年10月13日 10:58
  • 38985
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Vue.js系列之vue-router(中)(4)
举报原因:
原因补充:

(最多只允许输入30个字)