基于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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS与C#编码解码
Dec 03 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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 strtotime函数详解
2009/12/18 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php中smarty区域循环的方法
2015/06/11 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
php常量详细解析
2015/10/27 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Python中字典和集合学习小结
2017/07/07 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Django中的Model操作表的实现
2018/07/24 Python
python Selenium 库的使用技巧
2020/10/16 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
国培教师自我鉴定
2014/02/12 职场文书
公司年会主持词
2014/03/22 职场文书
项目建议书范文
2014/05/12 职场文书
民生工作实施方案
2014/05/31 职场文书
作文评语怎么写
2014/12/25 职场文书
十二生肖观后感
2015/06/12 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js