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路由参数简单实例讲解------简单易懂的更多相关文章

  1. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  2. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  3. vue.js路由vue-router

    学习网址:https://segmentfault.com/blog/vueroad 转载至:https://segmentfault.com/a/1190000009350679#articleHe ...

  4. Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...

  5. vue.js学习之入门实例

    之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...

  6. Vue.js路由

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  7. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  8. vue.js路由嵌套

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  9. Vue.js路由组件

    1.如果在创建项目中,没有自动安装vue router,那就自行安装.cnpm install vue-router --save vue-router两种模式 hash模式和history模式. 默 ...

随机推荐

  1. 工具 | 代码调试利器fiddle介绍

    我们开发的系统运行在用户的环境上,为了保护我们的代码和提升性能,前端javascript是经过压缩的.压缩的代码难于定位,当前只有chrome对压缩的代码支持格式化,但是变量和函数简化后,定位依然困难 ...

  2. Swift 细节

    1.swift ?和 !的区别 1.1 Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会有默认值,所以要求使用变量之前必须要对其初始化.如果在使 ...

  3. MapReduce笔记——技术点汇总

    目录 · 概况 · 原理 · MapReduce编程模型 · MapReduce过程 · 容错机制 · API · 概况 · WordCount示例 · Writable接口 · Mapper类 ·  ...

  4. 【viewport】移动设备的兼容性问题

    前段时间用微信开发者工具重构一个菜单项目的时候发现iphoneSE显示不全以及布局错乱的问题,找到了一个简单粗暴的解决方法.     移动设备上的viewport分为layout viewport  ...

  5. 48. leetcode 105题 由树的前序序列和中序序列构建树结构

    leetcode 105题,由树的前序序列和中序序列构建树结构.详细解答参考<剑指offer>page56. 先序遍历结果的第一个节点为根节点,在中序遍历结果中找到根节点的位置.然后就可以 ...

  6. 数据结构二叉树的所有基本功能实现。(C++版）

    本人刚学数据结构,对树的基本功能网上找不到C++代码 便自己写了一份,贴出方便大家进行测试和学习. 大部分功能未测试,如有错误或者BUG,请高手们指教一下,谢谢. 结点声明: BinTreeNode. ...

  7. 【开源社交系统研发日记】利用 Docker 包 Laradock 服务器部署 Laravel & ThinkSNS+ 等程序实战（多项目）

    什么是ThinkSNS+ ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+. 前段时间不知道抽上面疯 ...

  8. 【每天一道算法题】时间复杂度为O(n)的排序

    有1,2,……一直到n的无序数组,求排序算法,并且要求时间复杂度为O(n),空间复杂度为O(1),使用交换,而且一次只能交换两个数. 这个是以前看到的算法题,题目不难.但是要求比较多,排序算法中,时间 ...

  9. ES2017异步函数现已正式可用

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~​ ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数.如果你曾经被异步 JavaScript 的逻辑 ...

  10. APP应用测试技巧

    分页数据 测试分页数据,必须要满足一页数据,根据APP设置的分页数据准备一些测试数据. 满足一页数据的时候上下滑动瀑布流时, 页面数据是否会正常展示: 是否会出现第二页请求不到数据: 是否会出现重复加 ...