vue-router 学习快速入门


Posted in Javascript onMarch 01, 2017

vue-router 快速入门

配置路由

$ npm install vue-router --save

routes.js

import Home from './pages/Home.vue'
import Gifs from './pages/Gifs.vue'
import User from './pages/User.vue'

export const routes = [
  { path: '', component: Home },
  { path: '/gifs', component: Gifs },
  { path: '/user/:id', component: User }
  //指定路由和对应要渲染的组件
  //404的path应该是'*',要放在最末尾,当前面的都匹配不到时才匹配到404页面
  //this.$route.params.id 可以从路由中拿到id数据
]

main.js

import VueRouter from 'vue-router'
import { routes } from './routes'

Vue.use(VueRouter)
//路由初始化
const router = new VueRouter({
 routes
})

//将路由注入根组件
new Vue({
 el: '#app',
 ...
 router,
 render: h => h(App)
})

App.vue

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>

在模板中标注出组件渲染的位置

#号的含义

#号前表示的是发送给服务端的请求,要求返回html文件,而#号后表示的是发送给本地js的请求以寻求解决

路由参数动态绑定

使用watch

watch: {
  '$route'(to,from) {
    //to当前路由,from上一个路由
    this.id = to.params.id
  }
}

路由的数据传递

<router-link :to="{ name: 'userEdit', params: { id: $route.params.id }, query: { locale: 'en', list: 2 } }"></router-link>

传query参数可以达到地址栏出现/?locale=en&list=2

通过 $route.query.键名 来访问

命名视图

router-view 可以通过配置名字 name 来指定组件渲染的位置,增加了组件的复用性,比如分成 header main hero footer 来分别在一个视图中的不同位置上加载不同的组件

组件懒加载

我们只需要加载我们需要的组件呈现给用户,而其他不需要第一时间加载的组件,可以使用 webpack 实现异步加载,只在需要的时候才会发出请求,请求加载另一个组件

routes.js

const User = resolve => {
  require.ensure(['./components/user/User.vue'], () => {
    resolve(require('./components/user/User.vue'))
  }, 'GroupName')
}
//webpack 异步加载,通过组名,将要同时一起加载的组件打包加载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 #Javascript
Angular之指令Directive用法详解
Mar 01 #Javascript
js for循环倒序输出数组元素的实例
Mar 01 #Javascript
JSON与JS对象的区别与对比
Mar 01 #Javascript
JavaScript下拉菜单功能实例代码
Mar 01 #Javascript
Angular2 路由问题修复详解
Mar 01 #Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 #Javascript
You might like
PHP中设置时区方法小结
2012/06/03 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
Java程序员面试题
2016/09/27 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
同学聚会感言一句话
2015/07/30 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL