vue-router2.0的用法
随着vue越来越火,而vue-router却是一个项目不可或缺的,所以在这里结合实例总结一下router的用法,也是给自己的一个总结。
1、首先第一步当然是安装vue-router依赖,当然也可直接script引用。接着新建一个router文件下新建一个index.js,这个文件主要用于配置路由。index.js代码如下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const Recommend = () => import('components/recommend/recommend') const Rank = () => import('components/rank/rank') const Search = () => import('components/search/search') const SingerDetail = () => import('components/singer-detail/singer-detail') const TopList = () => import('components/top-list/top-list') export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, { path: '/rank', component: Rank, children: [ { path: ':id', component: TopList } ] }, { path: '/search', component: Search, children: [ { path: ':id', component: SingerDetail } ] } ] })
我相信看过官网的都大概明白上面代码的意思,path:’/’意思是默认指定的路由路径,也就是刚进去指定的路由,这里默认指向recommend;而每个children代表子路由,比如Search这个组件的子路由是SingerDetail,当然可以指定三级、四级路由。
2、第二步就是在main.js文件下引入router这个文件,并初始化。代码如下:
import Vue from 'vue'; import App from './App'; import router from './router'; new Vue({ el: '#app', router, render: h => h(App) });
3、第三步在App.vue这个文件下定义一个容器用于展示路由指定下的组件。代码如下:
<template> <div id="app" @touchmove.prevent> <div class="tab"> <router-link tag="div" to="/recommend"> <span class="tab-link">推荐</span> </router-link> <router-link tag="div" to="/rank"> <span class="tab-link">排行</span> </router-link> <router-link tag="div" to="/search"> <span class="tab-link">搜索</span> </router-link> </div> <keep-alive> <router-view></router-view> </keep-alive> </div> </template>
<router-view></router-view>就是路由容器,之所以放在keep-alive这个标签下是对数据进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染。To=”/recommend”表示点击”推荐”这个标签就跳转到recommend这个路由,也就是我们之前配置的路径。
讲到这里我们已经简单的完成一个单页面应用了。这里我采用的是模块化编程。我把路由配置、初始化、渲染写在各个文件下。这样也符合大家的组件化开发思路。下面我在进行一些路由用法的补充。
4、多级路由的用法
<template> <div class="recommend"> <ul> <li @click="selectItem(item)" v-for="item in discList" class="item"> item.text </li> </ul> <router-view></router-view> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { discList: [ {dissid:,text:'条目1'}, {dissid:,text:'条目2'}, {dissid:,text:'条目2'} ], } } methods: { selectItem(item) { this.$router.push({ path: `/recommend/${item.dissid}` }) } } } </script>
在这里我通过在recommend这个组件下实现二级路由跳转。首先渲染discList列表里面的数据,点击li标签跳转到第一步在index.js定义的Recommend组件下的子路由Disc。通过$router.push()这个方法,带上这条数据的唯一id值即可实现子路由跳转。
router.push()方法就是用来动态导航到不同的链接的。它会向history栈添加一个新的记录,点击<router-link :to="...">等同于调用router.push(...)。
5、router.go()的用法
router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。
例子
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
vue-router2.0的用法的更多相关文章
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- 新手向:Vue 2.0 的建议学习顺序
新手向:Vue 2.0 的建议学习顺序 尤雨溪 1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出 ...
- Vue插件编写、用法详解(附demo)
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- 说一说Vue(2.0)组件的通信方式
Vue(2.0)是组件化的开发模式,在不借助vuex框架的前提下,组件之间如何通信呢?接下来我在开发中总结了几种情况.1.父组件给子组件传值(props): 父组件给子组件传值的方式主要是用函数pro ...
- 使用 Vue 2.0 实现服务端渲染的 HackerNews
Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...
- vue 2.0 无法编译ES6语法
# vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
随机推荐
- python twisted 的定时调用带参的函数
无参情况:lc = task.LoopingCall(fun)如果fun带有参数,可以使用functools.partial传递 (fun2 = partial(fun, param1,[...]) ...
- Mac+Webstorm 双更新后 webstorm无法使用内置svn
我终于营业了!!!!!! EachTime!!!! 我更新了mac系统后,就会莫名其妙的webstorm的svn无法使用 具体表现为无法更新和提交 具体报错为:Can't use Subversion ...
- ifconfig配置IP地址和子网掩码
ifconfig eth0 192.168.2.10 ifconfig eth0 192.168.2.10 netmask 255.255.255.0
- visual studio code 调试reactjs
1.首先到visual studio code官网下载ide. 2.打开visual studio code,点击右侧菜单条的小图标 找到[Debugger for Chrome],并安装 3.打开c ...
- OpenLayers在地图外放置控件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- etcd使用
下载: https://github.com/etcd-io/etcd/releases/tag/v3.3.13 tar -zxvf etcd-v3.3.13-linux-amd64.tar.gz ...
- golang 命令行参数
package main import ( "fmt" "flag" ) func main() { //定义几个变量,用于接收命令行的参数值 var user ...
- 【水滴石穿】imooc_gp
这个项目应该是一个标杆项目,看到之前很有几个项目都是按照这个项目的页面摆放顺序来的 不过可以作为自己做项目的一种方式 源码地址为:https://github.com/pgg-pgg/imooc_gp ...
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
- laravel 图片
/** * 缩略图上传 */ public static function addPic() { $inputData = request()->all(); $rules = [ 'main_ ...