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 07 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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/01/06 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
python实现定时同步本机与北京时间的方法
2015/03/24 Python
在Python中处理XML的教程
2015/04/29 Python
python中self原理实例分析
2015/04/30 Python
Python实现队列的方法
2015/05/26 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python类的动态绑定实现原理
2020/03/21 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python中format函数如何使用
2020/06/22 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
英语自荐信范文
2013/12/11 职场文书
教师职称自我鉴定
2014/02/12 职场文书
六查六看六改心得体会
2014/10/14 职场文书
幽灵公主观后感
2015/06/09 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript