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 闭包究竟是什么
Apr 12 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
jQuery文字轮播特效
Feb 12 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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生成验证码
2017/02/23 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
element实现合并单元格通用方法
2019/11/13 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python中运行并行任务技巧
2015/02/26 Python
如何在python中使用selenium的示例
2017/12/26 Python
python基础教程项目二之画幅好画
2018/04/02 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python实现批量命名照片
2020/06/18 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
初一生物教学反思
2014/01/18 职场文书
网络营销策划方案
2014/06/04 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
培训简讯范文
2015/07/20 职场文书
导游词之吉林吉塔
2019/11/11 职场文书