Vue-router(vue2.0)用法示例
一.新建3个组件
1./src/components/post.vue
<template>
<div>
hello world! this is POST!
</div>
</template> <script>
export default { }
</script>
2./src/components/view.vue
<template>
<div>
hello world! this is VIEW!
</div>
</template> <script>
export default { }
</script>
3./src/components/vote.vue
<template>
<div>
hello world! this is VOTE!
</div>
</template> <script>
export default { }
</script>
二.路由
1.入口文件main.js,导入路由
import router from './router'
可以看到router是从router这个文件夹中引入的
2.打开router文件夹下的index.js,加入两个路由post和view
import Vue from 'vue'
import Router from 'vue-router'
import post from '@/components/post'
import view from '@/components/view' // 注册路由
Vue.use(Router) export default new Router({
mode: 'history',
routes: [
{ path: 'post', name: 'post', component: post },
{ path: 'view', name: 'view', component: view }
]
})
PS:mode有三种模式
(1).hash模式:使用URL hash值来作为路由。支持所有浏览器。默认,这会在地址栏中出现#
(2).history模式:依赖HTML5 History API和服务器配置。查看HTML5 History模式。
(3).abstract模式:支持所有JavaScript运行环境,如Node.js服务器端。如果发现没有浏览器的API,路由会自动强制进入这个模式。
三.使用路由
1.app.vue中写入
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="/post">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<router-view></router-view>
</div>
</template> <script>
export default {}
</script>
2.解释点:
(1)router-link
a.router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址
b.to:这是一个必须设置的属性,否则路由无法生效。除了使用name,也可以是用path
<router-link to="/post">post</router-link>
c.replace
一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。
d.tag
router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。
(2).router-view
这个组件十分关键,它就是用来渲染匹配到的路由的。可以附加transition过渡,也可以配合<keep-alive>来缓存数据.
四.动态路由(携带参数的路由)
1.使用路由命名name
(1).修改view组件:
<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template> <script>
export default { }
</script>
(2).修改App.vue
<router-link :to="{ name: 'view', params: {id: 10} }">view</router-link>
2.使用路由path
(1).修改router下的index.js
{ path: '/view/:id', name: 'view', component: view }
(2).修改App.vue
<router-link to="/view/10">view</router-link>
(3).修改view.vue
<template>
<div>
hello world! this is VIEW! {{ $route.params.id }}
</div>
</template> <script>
export default { }
</script>
五.嵌套路由(在组件中使用路由)
我们实现在view组件中包含post组件和vote组件
1.改写App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<router-view></router-view>
</div>
</template> <script>
export default {}
</script>
2.改写router/index.js
export default new Router({
mode: 'history',
routes: [
{
path: '/view',
name: 'view',
component: view,
children: [
{ path: '/post', name: 'post', component: post },
{ path: '/vote', name: 'vote', component: vote }
]
}
]
})
3.改写view.vue
<template>
<div>
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'vote', params: {} }">vote</router-link>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script>
六.导航式编程router.push()
点击router-link时执行的就是router.push()的方法,我们可以单独给它一个点击事件,同样可以实现跳转
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{ name: 'post', params: {} }">post</router-link>
<router-link :to="{ name: 'view', params: {} }">view</router-link>
<button @click="goView">跳转</button>
<router-view></router-view>
</div>
</template> <script>
export default {
methods: {
goView () {
this.$router.push('/view')
}
}
}
</script>
Vue-router(vue2.0)用法示例的更多相关文章
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue2.0用法以及环境配置
一.配置环境搭建 1.安装node.js (可以去官网看) 2.安装git (推荐看廖雪峰文章,点击查看) 3.安装vue: cmd:npm install vue //最新稳定版本 npm inst ...
- vue DatePicker vue2.0的日期插件
一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...
- vue2.0用法技巧汇总
1.class拼接: 2.select下拉截取: <template> <!--vip班支付报名页面--> <div id="payRecordMain&quo ...
- Vue:Vue2.0搭建脚手架
随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
随机推荐
- AGC019-E Shuffle and Swap
给定两个长度为\(n\le 10^5\)的\(01\)串 \(A, B\), 满足 \(1\) 的数量相等 求通过下列方式将\(A\)变成\(B\)的概率 (mod意义下) 构造序列\(a,b\). ...
- 关于 Delphi 中流的使用(1) 用 TMemoryStream(内存流) 入门 &&& 关于指针的迷惑,我自己问的.
来自:http://www.cnblogs.com/del/archive/2008/01/01/1022124.html -------------------------------------- ...
- Python的并发并行[0] -> 基本概念
基本概念 / Basic Concept 快速跳转 进程 / Process 线程 / Thread 协程 / Coroutine 全局解释器锁 / Global Interpreter Lock ...
- 线段树【p2801】教主的魔法
Description 教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列,被编号为1.2.--.N. 每个人的 ...
- Python爬取中国天气网
Python爬取中国天气网 基于requests库制作的爬虫. 使用方法:打开终端输入 “python3 weather.py 北京(或你所在的城市)" 程序正常运行需要在同文件夹下加入一个 ...
- 反汇编引擎Capstone
反汇编引擎Capstone Capstone是Kali Linux自带的一款轻量级反汇编引擎.它可以支持多种硬件构架,如ARM.ARM64.MIPS.X86.该框架使用C语言实现,但支持C++.P ...
- 【NOIP模拟赛】【乱搞AC】【贪心】【模拟】匹配
匹配 (match.pas/match.c/match.cpp) [题目描述] 到了新的学期,Mcx痛苦的发现通用技术课居然是有实验课的,这样的话他就不得不放弃写作业的想法而去做一件类似于搭积木的事情 ...
- Memcache的mutex设计模式 -- 高并发解决方案
场景 Mutex主要用于有大量并发访问并存在cache过期的场合,如 首页top 10, 由数据库加载到memcache缓存n分钟: 微博中名人的content cache, 一旦不存在会大量请求不能 ...
- 系统学习Linux建议
国内的专业Linux网站(GB) ChinaUnix Linux中国 实验楼: 免费提供了Linux在线实验环境,不用在自己机子上装系统也可以学习Linux,超方便实用!. 国内的专业Linux网站( ...
- UBIFS分区制作及UBIFS烧写和启动
参考 http://blog.csdn.net/chongzi865458/article/details/6799258 ubiattach version 1.0 - a tool to atta ...