vue-router路由的使用
1、路由作用
用vue.js + vue-router创建单页面应用。页面不需要刷新就可以页面跳转,提供用户更好体验。
2、路由配置
new Router({
routes: [{
path: '/', //匹配路径
name: 'Hello', //路由的别名
component: Hello //需要加载的组件名
}, {
//使用变量名的形式传递参数。例如:/detail/10086
//在Detail组件中使用{{$router.params.id}}来接收
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
})
3、路由跳转
<router-link :to="{name:'Detail',params:{id:10086}}">详情</router-link>
4、实践:两组件之间跳转
代码实例 4.1、index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/component/Hello'
import Detail from '@/component/Detail' Vue.use(Router) export defaultnew Router({
router: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/detail/:id',
name: 'Detail',
component: Detail
}]
}) 4.2、Hello.vue:src->component->Hello.vue <template>
<div class = "hello" >
<h1>这是hello页面 </h1>
< router - link: to = {name: 'Detail',params: {id: 10086}}>详情</router-link>
</div>
</template> <script>
export default{
name: 'hello',
data() {
return {
msg: 'hello vue'
}
}
}
</script> < !--add "scoped" attribute limit css to this compent only-- >
<style scoped>
h1, h2 {
font - weight: normal;
} ul {
list - style - type: none;
padding: 0;
} li {
display: inline - block;
margin: 0 10px;
} a {
color: # 42b983
}
</style> 4.3、Detail.vue:src->component->Detail.vue < template >
< div >
< h1 > 这是detail页面 </h1>
{{$route.params.id}}
</div>
</template> <script>
export default{
name: 'hello',
data() {
return {}
}
}
</script> < !--add "scoped" attribute limit css to this compent only-- >
< style scoped >
</style> 4.4、启动项目
my_vue_app > npm run dev
5、vue组件由三部分组成
vue组件:template:html代码、 script:javascript代码、style:css代码
vue-router路由的使用的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- ldd 以及 ld-linux.so.2
最近跟编译工具干上了,可能是问题积累集中爆发的结果. 今天对 ld-linux.so.x 有很大兴趣,想对它多些了解,遂百度之.发现了指令 ldd. 关于 ldd 其实 ldd 是一个脚本,并不是一个 ...
- ReactNative踩坑日志——fetch如何向服务器传递参数
一:简单参数 简单的参数,我们可以使用手动拼接的方式传递. 格式为: fetch(url?key1=val1&key2=val2&...).then((response) => ...
- Python学习笔记八:ORM框架SQLAlchemy
一:SQLAlchemy使用 1:实体类的创建 ORM中的实体类与一般的Python类不同,在其中,使用 __tablename__=""指明该类与数据库中某个表相对应,然后定义一 ...
- SWF运行时判断两个DisplayObject是否同个类型,属于flash professional库中的同一个元件
一般我们判断两个实例对象是否同样的类型,可以用typeof得到对象类型,然后用==号比较. typeof适用于原生类型. 而对于自定义类型,虽然typeof得到的都是Object,但还有更强的招数:g ...
- 什么是XML RPC?
# -*- coding: cp936 -*- #python 27 #xiaodeng #什么是XML RPC? #中文叫:远程过程调用 #使用http协议做传输协议的rpc机制,使用xml文本的方 ...
- windows下 jemalloc编译
准备 Windows下使用VS2015进行编译,需要使用cmake构建版本.(如果有cygwin,在其中执行VS的vcvarsall.bat后使用"CC=cl ./autogen.sh&qu ...
- 51单片机——My-Clock项目
技术:51单片机.光敏传感器.PCF8591.DHT11.DS1302.OLED显示屏 概述 项目My-Clock是一个环境监测时钟,接入光敏传感器和温湿度传感器监测环境信息,加入DS1302模块 ...
- iteye-Spring的缺点有哪些
http://www.iteye.com/topic/1126929 1. flounders -- 发表时间:2012-09-25 如题,希望大侠们指出,不能用Spring就觉得他什么都好, ...
- keras中的loss、optimizer、metrics
用keras搭好模型架构之后的下一步,就是执行编译操作.在编译时,经常需要指定三个参数 loss optimizer metrics 这三个参数有两类选择: 使用字符串 使用标识符,如keras.lo ...
- Xcode8 带来的新特性和坑
Xcode8新特性 Interface Builder 随着14年的iPhone6和6P出来之后,iPhone的屏幕尺寸也越来越多,屏幕适配是一个需要解决的问题,以后不一定苹果又出什么尺寸的iPhon ...