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. （转）Spring3MVC 在JSP中使用@ModelAttribute

    原文连接:http://liukai.iteye.com/blog/973717,仅供自己参考. 在教程中,我们将创建一个简单的Spring3MVC simple CRUD应用程序. 什么是@Mode ...

  2. java线程数过高原因分析

    作者:鹿丸不会多项式  出处:http://www.cnblogs.com/hechao123   转载请先与我联系. 一.问题描述 前阵子我们因为B机房故障,将所有的流量切到了A机房,在经历了推送+ ...

  3. 【JAVASCRIPT】React 学习 - 登录实战

    摘要 实现一个登录的react 组件, 包含组件更新.ajax 交互.渲染新组建. 代码 <head> <meta charset="utf-8"> < ...

  4. vue使用中的随笔

    在vue中vue-router配置的路径默认有"#"号,虽然无伤大雅,但是很多客户都不想看到,所以在初始配置路由的时候加上下面一句代码就可以了 mode:'history', 路径 ...

  5. javascript对象的创建--相对java 怎样去创建了"类"i以及实例化对象

    由于javascript没有java那么多基本类型,同时也没有提供class这个东西,那么我们想实现javascript的对象创建应该怎么办呢,我简单地从w3c提供的课件中提取了一下几种方法: 一.工 ...

  6. spring实现文件上传（图片解析）

    合抱之木,生于毫末,千里之行,始于足下,要想了解spring的文件上传功能,首先要知道spring是通过流的方式将文件进行解析,然后上传.那么是不是所有需要用的文件上传的地方都要写一遍文件解析器呢? ...

  7. 花了一年时间开发的三维弯管机交互式转档软件(三维管子模型UG,SOLIDWORK,PRO/E文件转成YBC)

    在弯管机加工中,由管子模型生成可直接进行弯管加工的YBC数据可以大大提高弯管编程过程.传统的做法是先用dxf数据文件(用autocad绘制管子的轴心线数据)转出XYZ数据,然后由XYZ数据转成YBC数 ...

  8. Java 期末考试

    一: 题目:打印出100-999之间所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.   例如:153是一个"水仙花 ...

  9. 使用jquery获取url及url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javasc ...

  10. Win7 IIS建站

    1.在控制面板->程序和功能->打开或关闭windows功能->安装IIS服务 2.控制面板->管理工具->IIS管理器 客户端访问Web服务器,服务器端不需关闭防火墙, ...