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 相关文章推荐
json简单介绍
Jun 10 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
子页向父页传值示例
Nov 27 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
完美的js图片轮换效果
Feb 05 Javascript
jquery实现页面加载效果
Feb 21 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
使用vue制作滑动标签
Sep 21 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命令行用法入门实例教程
2014/10/27 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
提高php编程效率技巧
2015/08/13 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python做量化投资系列之比特币初始配置
2018/01/23 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
大学生求职信
2014/06/17 职场文书
安全口号大全
2014/06/21 职场文书
投标承诺函范文
2015/01/21 职场文书
北大自主招生自荐信
2015/03/04 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python