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. 开启属于你的GNOME桌面

    图片剪辑源自美剧<黑客军团>(英语:Mr. Robot) GNOME(GNU Network ObjectEnvironment)是一种GNU网络对象模型环境 ,GNU计划的一部分,目的为 ...

  2. 使用maven搭建环境

    今天第一次用maven创建springmvc工程,下载配置都很成功,但用命令行创建项目时遇到一些问题: 1.命令行显示命令不为内部或外部命令: 解决方法:使用管理员模式打开命令行 2. 显示到如下图所 ...

  3. Android学习笔记-开关按钮ToggleButton和开关Switch

    本节给大家介绍的Android基本UI控件是:开关按钮ToggleButton和开关Switch,这两个其实都是开关组件,只是后者需要在Android 4.0以后才能使用 所以AndroidManif ...

  4. 6-最基础的服务-es6写法

    创建server.js 'use strict'; //http模块 var http = require('http'); //封装的方法 var handlers = require('./han ...

  5. ORA-01031:insufficient privileges解决方法

    今天刚创建的数据库,用sys身份登录的时候提示 ORA-01031:insufficient privileges !郁闷了,肯定是先百度一波···然后设置当前用户权限.用Administator用户 ...

  6. [小北De编程手记] Lesson 01 - AutoFramework构建 之 从一个简单的Demo聊起

    写在最前面 这个系列的主旨是要跟大家分享一下关于自动化测试框架的构建的一些心得.这几年,做了一些自动化测试框架以及团队的构建的工作.过程中遇到了很多这样的同学,他们在学习了某一门语言和一些自动化测试的 ...

  7. 解决Nuget:https://api.nuget.org/v3/index.json 访问不了的问题

    最近在家中用使用VS编译项目时,Nuget包一直下载不了,直接在浏览器中访问https://api.nuget.org/v3/index.json ,浏览器也打不开网址.把https协议改成http协 ...

  8. Luogu P3367 【模板】并查集

    题目描述 如题,现在有一个并查集,你需要完成合并和查询操作. 输入输出格式 输入格式: 第一行包含两个整数N.M,表示共有N个元素和M个操作. 接下来M行,每行包含三个整数Zi.Xi.Yi 当Zi=1 ...

  9. [算法题] Search in Rotated Sorted Array

    题目内容 本题来源LeetCode Suppose an array sorted in ascending order is rotated at some pivot unknown to you ...

  10. SVN 、Git、Github的使用

    1.1 SVN 总结以及使用建议 每一次保存历史记录实际上就是一次提交 什么时候去保存历史记录? 完成了一个具体的功能模块 代码运行没有bug 当天工作结束提交一次 没有 bug 的前提下去提交一次 ...