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. （转）linux中项目部署和日志查看

    1 查找进程 ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/ ...

  2. ural 1989 subplindromes

    https://vjudge.net/problem/URAL-1989 题意: 先给出一个字符串,对于这个字符串,有两种操作,一种是询问从下标x到y的串是不是回文串,另一种是将下标为pos的字符改为 ...

  3. 有关java 8

    http://www.iteye.com/news/27608     Java 8 发布时间敲定,延期半年 http://www.iteye.com/news/24631/   Java 8 的重要 ...

  4. Spring AOP With AspectJ

    一.AOP和拦截器 某些情况下,AOP和拦截器包括Filter能够实现同样的功能,一般都是请求即controller层的操作,这三个执行顺序为Filter>Interceptor>AOP, ...

  5. hdu--2570--迷瘴

    #include<iostream> #include<vector> #include<algorithm> using namespace std; int m ...

  6. 命令控制台与java环境配置

    1. 命令控制台 1) Linux / Unix 命令格式  command [-选项...] [参数...]  如:  ls -a ~      mkdir .demo  //创建隐藏目录      ...

  7. 手算平方根和基于 Java BigInteger 的大整数平方根的实现

    为了实现任意大数的运算,long用BigInteger替换带哦. 好了废话少数,先说数学原理,也就是手算平方根计算机代码实现!那么什么叫手算平方根了??? 手开方图解 据说前苏联的普通工人都会的(毛熊 ...

  8. 从JSON数据源导入数据(未完)

  9. 《Java从入门到放弃》入门篇：springMVC数据校验

    昨天我们扯完了数据传递,今天我们来聊聊数据校验的问题.来,跟着我一起读:计一噢叫,一按艳. 在springMVC中校验数据也非常简单,spring3.0拥有自己独立的数据校验框架,同时支持JSR303 ...

  10. Connect By、Level、Start With的使用

    --Connect By.Level.Start With的使用 --------------------------------------2013/11/20 Syntax 1 CONNECT B ...