案例效果

从用户列表跳转到修改用户，传递参数id=100

在修改用户页面接收id的值，并显示在网页

一、在用户列表路由中跳转传参

从用户列表路由中跳转到修改用户的路由，并且传递参数id=100

<router-link to="user_update?id=100">修改用户</router-link>

二、创建修改用户的路由，接收参数

接收参数id，并且显示在页面上

<template id="template_user_update"><div><h1>修改用户页面</h1><p>接收到参数id：{{this.$route.query.id}}</p></div>
</template>

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="assets/vue.min-v2.5.16.js"></script><script src="assets/vue-router.min-2.7.0.js"></script>
</head>
<body>
<template id="template_top"><div style="width: 1000px; height: 200px; background-color: yellow; text-align: center;line-height: 200px;font-size: 24px">aaa</div>
</template>
<template id="template_left"><div style="width: 200px; height: 600px; background-color: gray; float: left"><router-link to="index">首页</router-link><router-link to="user_list">用户列表</router-link><router-link to="user_add">添加用户</router-link></div>
</template>
<template id="template_right"><div style="width: 798px; height: 600px; border: 1px solid black; float: left"><router-view></router-view></div>
</template><template id="template_user_list"><div><h1>用户列表</h1><router-link to="user_update?id=100">修改用户</router-link></div>
</template>
<template id="template_user_add"><div><h1>添加用户</h1></div>
</template>
<template id="template_index"><div><h1>欢迎使用xxx管理系统</h1></div>
</template>
<template id="template_user_update"><div><h1>修改用户页面</h1><p>接收到参数id：{{this.$route.query.id}}</p></div>
</template><div id="app" style="width: 1000px; margin-left: auto; margin-right: auto"><aa></aa><bb></bb><cc></cc>
</div><script>//注册模板Vue.component('aa', {template: '#template_top'});Vue.component('bb', {template: '#template_left'})Vue.component('cc', {template: '#template_right'})var pageUserList = {template: '#template_user_list'}var pageUserAdd = {template: '#template_user_add'}var pageIndex = {template: '#template_index'}var pageUserUpdate = {template: '#template_user_update'}//创建router对象var vt = new VueRouter({routes: [{path: '/user_list', component: pageUserList},{path: '/user_add', component: pageUserAdd},{path: '/index', component: pageIndex},{path: '/user_update', component: pageUserUpdate}]});//创建vue实例new Vue({el: '#app',router: vt,created: function () {//页面加载之后在router-view中显示首页（index）this.$router.push("index");}})
</script>
</body>
</html>

Vue路由传参小案例相关推荐

vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
vue路由传参的四种方式
vue路由传参一.router-link路由导航父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link> ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
vue路由传参，对参数值编码处理
vue路由传参: 问题: 很明显vue路由传参在没有任何处理的情况下,参数值会裸露在URL中,这并不是我们所希望的.但因为某些因素一定要用路由传参,最起码也要对这种裸露在URL中的参数值做个编码 Ja ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...

Vue路由传参小案例

案例效果

一、在用户列表路由中跳转传参

二、创建修改用户的路由，接收参数

三、全部代码

Vue路由传参小案例相关推荐

最新文章

热门文章