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常用数组操作方法简明总结
Jun 20 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
js的Object.assign用法示例分析
Mar 05 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
APMServ使用说明
2006/10/23 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
用原生js做单页应用
2017/01/17 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python有证书的加密解密实现方法
2014/11/19 Python
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
django rest framework使用django-filter用法
2020/07/15 Python
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
公司授权委托书样本
2014/09/15 职场文书
万能检讨书2000字
2014/10/17 职场文书
致运动员赞词
2015/07/22 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书