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 相关文章推荐
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
微信小程序form表单组件示例代码
Jul 15 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
浅谈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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
自荐信模版
2013/10/24 职场文书
银行求职信个人范文
2013/12/16 职场文书
员工考核管理制度
2014/02/02 职场文书
基督教婚礼主持词
2014/03/14 职场文书
学习雷锋倡议书
2014/04/15 职场文书
保护野生动物倡议书
2014/05/16 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Python+DeOldify实现老照片上色功能
2022/06/21 Python