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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
JavaScript监听一个DOM元素大小变化
Apr 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开发微信支付获取用户地址
2015/10/04 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
脚本收藏iframe
2006/07/21 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Django实现分页功能
2018/07/02 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
诉前财产保全担保书
2014/05/20 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年校长工作总结
2014/12/11 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
新员工入职感言范文!
2019/07/04 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js