基于vue.js路由参数的实例讲解——简单易懂


Posted in Javascript onSeptember 07, 2017

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路由参数的实例讲解——简单易懂就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
Django使用多数据库的方法
Sep 06 #Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 #Javascript
详解require.js配置路径的用法和css的引入
Sep 06 #Javascript
js canvas实现简单的图像扩散效果
Jun 28 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
原生JS实现小小的音乐播放器
2017/10/16 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
业务员简历自我评价
2014/03/06 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
初中学生操行评语
2014/12/26 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Python IO文件管理的具体使用
2022/03/20 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技