vue.js路由参数简单实例讲解------简单易懂
vue中，我们构建单页面应用时候，一定必不可少用到vue-router
vue-router 就是我们的路由，这个由vue官方提供的插件
首先在我们项目中安装vue-router路由依赖
第一种，我们提供命令行来安装
npm install vue-router --save
第二种，我们直接去官方github下载
https://github.com/vuejs/vue-router
路由参数设置
1，实例化一个路由，然后路由映射表中的地址带参数,这个参数就是路由的参数
接着给映射表中的路由设置一个name值
语法
{path:"/home/:id,component:home,name:"wang"}
2.当我们挂载Vue实例上去后，我们在home组件中，要获取当前路由参数
语法 this.$route.params.参数名字
3.根据当前参数不同，设置路由导航去不同的路径
<router-link :to="{name:'wang',params:{id:1}}></router-link>
下面做一个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--如果使用动态绑定，而且还有params 必须要给路由增加名字-->
<router-link v-for="(item,index) in article" :key="index" :to="{name:'wang',params:{id:item.id}}" tag="div">{{item.title}}</router-link>
<router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
//定义一个组件
let Article={
template:"<div>这是第{{id}}篇</div>",
computed:{
id(){
//获取路由路径的参数值
return this.$route.params.id;
},
name(){
//获取路由路径的参数值
return this.$route.params.name;
}
}
}
//路由路径映射表
let routes=[
//:id表示必须传递参数，但是内容可以是随机的
//会将当前冒号后面的值和真实传递的值组成一个对象
// this.$route.params={id:123}
//{path:'',component:E} //默认路由，相当于配置了一个
//{path:'*',redirect:'/article/:1'} //默认重定向，一般用作404页面，会导致路径改变
{path:"/article/:id",component:Article,name:'wang'} ]
//实例化一个路由
let router=new VueRouter({
routes
})
router.push('/article/1'); //默认加载第一个路径设置
let vm=new Vue({
el:"#app",
data:{
article:[
{title:"111",id:1},
{title:"111",id:2},
{title:"111",id:3}
]
},
router
})
</script>
</html>
vue.js路由参数简单实例讲解------简单易懂的更多相关文章
- vue.js路由vue-router（一）——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- vue.js路由vue-router
学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue.js路由嵌套
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- Vue.js路由组件
1.如果在创建项目中,没有自动安装vue router,那就自行安装.cnpm install vue-router --save vue-router两种模式 hash模式和history模式. 默 ...
随机推荐
- 【Django】Python web开发：几个模板系统的性能对比（转）
http://blog.chedushi.com/archives/910 结论: 点评一下吧.django就是个渣,不多废话了.webpy的代码很简洁,可惜速度太慢了.bottle看起来快一点,不过 ...
- taskctl实现自定义mysql存储过程作业类型调用
TASKCTL支持任意作业类型的扩展,但目前TASKCTL 4.1.3版本中并没有内置mysql存储过程的作业插件.通过介绍使TASKCTL支持调度mysql存储过程作业类型的步骤,一方面解决一些朋友 ...
- bzoj 3594: [Scoi2014]方伯伯的玉米田
3594: [Scoi2014]方伯伯的玉米田 Time Limit: 60 Sec Memory Limit: 128 MB Submit: 1399 Solved: 627 [Submit][ ...
- mybatis入门介绍二
相信看过我的上一篇博客的同学都已经对mybatis有一个初步的认识了.这篇博客主要是对mybatis的mapper代理做一下简单的介绍,希望能够帮助大家共同学习. 我的上一篇博客:mybatis入门介 ...
- 【原创】Easyui tree filter 过滤本地数据无效的原因
Easyui tree filter 过滤本地数据无效的解决方式 正确使用方式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- ASP.NET Core MVC Tag Helpers 介绍
简介 Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能.将它们添加到视图中,会经过Razor模板引擎处理并创建一个HTML,之后再返回给浏览器.有一些Tag Helpers,其实 ...
- 【EntityFramework 6.1.3】个人理解与问题记录（2）
前言 才看完一季动漫,完结撒花,末将于禁,原为曹家世代赴汤蹈火!想必看过的都会知道这个,等一下要不吐槽一下翻拍的真人版,○( ^皿^)っHiahia-,好了快醒醒改办正事儿了,好的,我们接着上一篇文章 ...
- .net 设置webbrowser控件使用的IE版本
当我们在使用.net的Webbrowser控件时,发现webbrowser展示的内容和我们用浏览器展示的内容不一致,甚至出现:'JSON' is undefined. 原因是webbrowser使用的 ...
- 学问Chat UI(2)
前言 上文讲了下要去做哪些事,重点分析了融云Sdk中RongExtension这个扩展控件,本文来学习下同样是融云Sdk中的AutoRefreshListView如何适配多种消息的实现方式,写的有不足 ...
- InnoDB online DDL与快速索引创建
导读:在MySQL5.6之前版本,Innodb表的许多DDL操作是非常昂贵.许多ALTER TABLE操作的原理是通过创建新的空表,定义被要求的表选项和索引,然后逐行拷贝已存在记录到新表,在插入行时更 ...