-
2019-03-02 09:03:35
Vue动态路由:在一个页面获取上一个页面的传值
1:配置动态路由步骤:
const routes = [
//(main.js文件中)
{ path: '/Content/:aid', component: Content }//动态路径参数以冒号开头
]
在上一个页面中配置<router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>
2:在对应的页面
this.$route.params获取动态路由的值
代码示例:
//main.js import Vue from 'vue' import App from './App.vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import Home from './components/Home' import News from './components/News' import Content from './components/Content' import Product from './components/Product' /*定义路由 */ const routes = [ { path: '/', component: Home }, { path: '/Home', component: Home }, { path: '/News', component: News }, { path: '/Product', component: Product },//get传值 { path: '/Content/:aid', component: Content }//动态路由 ] // 实例化路由 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) Vue.use(VueRouter) Vue.use(VueResource) new Vue({ el: '#app', // 将路由实例挂载到vue实例上 router, render: h => h(App) })
传值页面:
<template> <div> <h1>这是新闻组件</h1> <ul> <li v-for="(item,key) in list" :key="key"> //:to="''+key"标识动态绑定key的值 <router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link> </li> </ul> </div> </template> <script> export default { data(){ return{ aaa:'m,sh', list:['你好','这是新文艺','这是新思想'] } } } </script> <style lang="scss" scoped> h1{ color: skyblue; } </style>
获取值的页面:
<template> <div id="content"> <h1>我是详情页面</h1> </div> </template> <script> export default { data(){ return{ } }, mounted(){ console.log(this.$route.params)/* 获取动态路由传值 */ } } </script> <style lang="scss" scoped> </style>
Get传值:
//传值页面 <template> <div> <br> <h2>这是一个首页组件</h2> <hr> <ul> <li v-for="(item,key) in list" :key="key"> <router-link :to="'/Product/?id='+key">{{key}}---{{item}}</router-link> </li> </ul> </div> </template> <script> import Bus from '../model/bus' export default { data(){ return{ msg:'Yes, a first Page!', title:'我是的数据NO.1', list:['商品已','商品丁','商品家'] } } } </script> <style lang="scss" scoped> h2{ color: red; } </style>
获取值的页面:
<template> <div id="product"> <h1>商品详情</h1> </div> </template> <script> export default { data(){ return{ } }, mounted(){ /* this.$route.query用于获取get传值 */ console.log(this.$route.query) } } </script>
main.js页面:
/*定义路由 */ const routes = [ { path: '/', component: Home }, { path: '/Home', component: Home }, { path: '/News', component: News }, { path: '/Product', component: Product },//get传值 { path: '/Content/:aid', component: Content }//动态路由 ]
更多相关内容 -
vue动态路由:路由参数改变,视图不更新问题的解决
2020-12-13 04:09:48使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时... -
vue3 路由传值
2021-07-01 16:52:50通过从路由中导入 useRoute useRouter 使用 route 和 router 传递参数 import {defineComponent } from "vue"; import { useRouter } from 'vue-router' export default defineComponent({ setup() { const $...通过从路由中导入 useRoute useRouter 使用 route 和 router
传递参数
import {defineComponent } from "vue"; import { useRouter } from 'vue-router' export default defineComponent({ setup() { const $router = useRouter() // 命名路由 let toAbout=()=>{ $router.push({name:'About',params:{id:1}}) //传递参数 } //query传值 let toNews=()=>{ $router.push({path:'/news',query:{id:2}}) //传递参数 } return { toAbout, toNews }; } })
接收参数
import {defineComponent } from "vue"; import { useRoute } from 'vue-router' export default defineComponent({ setup() { const $route = useRoute() onMounted(()=>{ console.log($route.params.id) // 打印 params 的参数 console.log($route.query.id) // 打印 query 的参数 }) }, })
-
vue路由的动态传值详解
2021-07-28 17:20:34路由跳转传值一种为路由的动态配置值,一种为路由的get传值,先来介绍路由的动态传值。 一.路由的动态传值 路径要求严格,在配置路由的时候设置动态传值 1.基本配置 index.js 配置路由的节点 // 配置的路由节点 ...路由跳转传值一种为路由的动态传值,一种为路由的get传值,先来介绍路由的动态传值。
一.路由的动态传值
路径要求严格,在配置路由的时候设置动态传值
1.基本配置
index.js 配置路由的节点
// 配置的路由节点 import Home from '../views/Home.vue' import about from '../views/About' //在配置路由的时候设置动态传值 类似/:id export default[ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component:about, } ]
router.js 配置整个的路由
//配置整个路由 import { createRouter, createWebHistory } from 'vue-router' import routes from '../router/index' const router = createRouter({ history: createWebHistory(), routes }) export default router
main.js
import { createApp } from 'vue' import App from './App.vue' //引入路由文件 import router from './router/router' const app=createApp(App); app.use(router); app.mount('#app');
主页面:App.vue
<template> <div id="app"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> <router-view></router-view> </div> </template> <script> export default { name:'app', } </script>
两个子组件:
Home.vue<template> <div class="home"> home组件 </div> </template> <script> export default { name: 'Home', } </script>
About.vue
<template> <div id="about"> about组件 </div> </template> <script> export default { name:'about', } </script>
界面结果显示:
2.在配置的路由节点动态传值
在配置的路由里进行传值
index.js// 配置的路由节点 import Home from '../views/Home.vue' import about from '../views/About' //在配置路由的时候设置动态传值 类似/:id export default[ { path: '/', name: 'Home', component: Home }, { path: '/about/:id', name: 'About', component:about, } ]
主页面:App.vue
<template> <div id="app"> <router-link to="/">Home</router-link> | //如果配置动态传值 点击跳转的时候也要进行传值 <router-link to="/about/1000">About</router-link>//此为静态的传的值1000 <router-view></router-view> </div> </template> <script> export default { name:'app', } </script>
界面结果显示:
- 如何获取路由的值在About.vue里
About.vue
<template> <div id="about"> about组件 </div> </template> <script> export default { name:'about', mounted(){ //挂载完成获取路由的动态传值 //this.$route 此api是当前路由的相关匹配参数 console.log(this.$route.params.id); } </script>
结果显示:
- 如果想要在App.vue绑定动态传值
App.vue
<template> <div id="app"> <router-link to="/">Home</router-link> | //动态绑定 使用es6 字符串模板 <router-link :to="`/about/${id}`">About</router-link> <router-view></router-view> </div> </template> <script> export default { name:'app', data(){ return{ id:123456 } } } </script>
界面结果显示:
- 如果路由上传多个值
index.js
// 配置的路由节点 import Home from '../views/Home.vue' import about from '../views/About' export default[ { path: '/', name: 'Home', component: Home }, { //在后面继续添加 path: '/about/:id/:name', name: 'About', component:about, } ]
App.vue也要做出相应的变化
<template> <div id="app"> <router-link to="/">Home</router-link> | <router-link :to="`/about/${id}/${name}`">About</router-link> <router-view></router-view> </div> </template> <script> export default { name:'app', data(){ return{ id:123456, name:'jiang', } } } </script>
界面结果显示:
vue 路由get传值链接:
https://blog.csdn.net/weixin_47863547/article/details/119189387 -
Vue路由传值的两种方法:动态路由与get传值
2019-02-24 10:20:161.动态路由传值 在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue <template> <!-- 所有的内容要被根节点包含起来--> <div id="news"> 我...1.动态路由传值
在我这个项目里要实现的是从 News.vue 跳转到Content.vue
News.vue
<template> <!-- 所有的内容要被根节点包含起来--> <div id="news"> 我是一个新闻组件 <br> <ul> <li v-for="(item,key) in list"> <router-link :to="'/content/'+key">{{key}}---{{item}}</router-link> <!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 --> </li> </ul> </div> </template> <script> export default { data(){ return { msg:'我是一个news组件', list:['111','222','333'] } } } </script>
Content.vue (主要是第16行和第17行)
<template> <div id="content"> 我是详情页面 </div> </template> <script> export default { data(){ return{ msg:"数据" } }, mounted(){ console.log(this.$route.params);//获取动态路由传值 } } </script>
在main.js 中配置路由(第16行与第23行)
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' //导入并使用 import VueRouter from 'vue-router' Vue.use(VueRouter) Vue.config.productionTip = false //1.创建组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import Content from './components/Content.vue'; import Pcontent from './components/Pcontent.vue'; //2.配置路由 注意,名字一定不能错 const routes = [ //若这里是 xxx,那么第25行应是 routers:xxx { path: '/home', component: Home }, { path: '/news', component: News }, { path: '/content/:aid', component: Content },/* 动态路由*/ { path: '/pcontent', component: Pcontent }, { path: '*', redirect: '/home' }//默认跳转路由 ] //3.实例化VueRouter 注意,名字一定不能错 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) //4.挂载路由 /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) //5.根组件的模板里放上这句话 <router-view></router-view>
最后在控制台中你可以看到:
点了 key=2 的内容,获取了aid。
2.get传值
在这里我要实现的是从 Home.vue 跳转到 Pcontent.vue
Home.vue(主要为第8行)
<template> <!-- 所有的内容要被根节点包含起来--> <div id="home"> 我是首页组件 <br> <ul> <li v-for="(item,key) in list"> <router-link :to="'/pcontent?aid='+key">{{key}}---{{item}}</router-link> </li> </ul> </div> </template> <script> export default { data(){ return { msg:'我是一个home组件', list:['商品111','商品222','商品333'] } } } </script>
Pcontent.vue(主要是第18行)
<template> <div id="pcontent"> 商品详情 </div> </template> <script> export default { data(){ return{ msg:"数据", } }, mounted(){ //get传值 console.log(this.$route.query); } } </script>
在main.js 中配置路由(第17行与第24行)
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' //导入并使用 import VueRouter from 'vue-router' Vue.use(VueRouter) Vue.config.productionTip = false //1.创建组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import Content from './components/Content.vue'; import Pcontent from './components/Pcontent.vue'; //2.配置路由 注意,名字一定不能错 const routes = [ //若这里是 xxx,那么第25行应是 routers:xxx { path: '/home', component: Home }, { path: '/news', component: News }, { path: '/content/:aid', component: Content },/* 动态路由*/ { path: '/pcontent', component: Pcontent }, { path: '*', redirect: '/home' }//默认跳转路由 ] //3.实例化VueRouter 注意,名字一定不能错 const router = new VueRouter({ routes // (缩写)相当于 routes: routes }) //4.挂载路由 /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) //5.根组件的模板里放上这句话 <router-view></router-view>
最后的效果是这样的:
为方便大家查看,我放上根组件和我的目录结构
这是App.vue 根组件<template> <div id="app"> <router-link to="/home">Go to Home</router-link> <router-link to="/news">Go to News</router-link> <hr> <router-view></router-view> </div> </template> <script> /** 1不同路由传值,动态路由 * * * (1).配置动态路由 * routes:[ * // 动态路径参数 以冒号开头 * {path: '/user/:id',component:User} * ] * * (2).在对应的页面 * this.$route.params 获取动态路由的值 * * * 2.get传值 * * * (1).配置动态路由 * routes:[ * // 动态路径参数 以冒号开头 * {path: '/user',component:User} * ] * * (2).在对应的页面 * this.$route.query 获取动态路由的值 * */ export default { name: 'App', data(){ return{ msg:'你好vue' } } } </script> <style> </style>
目录结构
若有任何疑问或是不解请在下方评论,谢谢。 -
18.vue动态路由传值和get传值
2019-07-26 12:09:56内容:动态路由传值和get传值 一、动态路由传值 (1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入 import News from './components/News.vue' import content from './components/content.vue' ... -
vue路由传值
2021-11-18 17:28:23基本路由传参 传递参数: 方式一: this.$router.push('/path地址?参数一=参数值1&参数二=参数值2') 方式二: this.$router.push({path:'',query:{参数一:参数值1,参数二:参数值2}}) 接收参数: this.$route.... -
Vue 动态路由传值
2018-06-19 17:29:00动态路由传值 1.配置动态路由; const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. <router-link :to="'/Shopcontent/'+key"> {{key}}--{{item}} ... -
VUE 3.0 路由传值
2022-05-05 17:29:361、Vue项目创建 -
vue路由组件传值
2021-05-31 11:11:00文章目录前言一、组件一(传值)1.element-ui界面2.JS部分一、组件二(接收值)1.element-ui界面2.JS部分 前言 例如:el-table表格中的某一列数据(标题)是被包裹在router-link中的,点击某一个标题,跳转到对应标题的... -
vue-router 前端路由之路由传值的方式详解
2021-01-19 16:27:23在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: ... -
【Vue学习总结】17.Vue实现动态路由传值
2020-11-15 19:04:30上一篇我们讲解了vue中的路由以及默认路由跳转,本篇我们来继续学习如何通过类似Get请求传值的方式,给路由传递参数。 本系列博文使用的Vue版本:2.6.11 一、动态传参的概念 上一篇我们实现了分别点击“首页”和... -
vue的路由传值,children嵌套
2020-10-30 08:53:01Document a登录 a注册 router-link登录 router-link注册 router-link登录:id 子路由实现 登录 注册 -
VUE路由传值的方式有哪几种
2021-11-11 21:36:54Vue-Router 传参可以分为两大类 分别是编程式的导航 router.push 和声明式的导航<router-link> 一、编程式的导航 router.push 编程式导航传递参数有两种类型:字符串、对象。 字符串 : 字符串的方式是... -
Vue路由跳转传值方法
2020-08-14 14:42:26传值: <router-link :to="{name:'跳转的路由名称',params:{数值名1:'值内容1',数值名1:'值内容1'}}" 取值: $route.params.数值名1 路由: { path: '/', name: '跳转的路由名称', component: () => import... -
vue动态路由传值以及get传值及编程式导航
2019-09-21 03:34:331.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to="/content/+item">{{item}}</router-link> 3.对应... -
vue 路由传值与跳转
2019-06-06 14:25:18特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的 使用方法如下: this.$router.push({ name: 'news', params: { userId: 123 }}) 接收值:this.$route.params.userId 查询参数其实就是... -
vue路由传值和路由跳转
2021-05-13 20:30:20动态路由传值3. 路由query对象传值4. 命名路由传值总结路由有以下两种跳转方式:路由跳转时共有以下四种传值方式: 前言 一、vue路由配置步骤 1.第一步: 导入vue.js和vue-router.js插件 <script src='vue.js'>... -
vue 路由组件传值
2019-03-18 14:59:08地址:... 1、不同路由传值:动态路由传值 A.配置动态路由 routes: [ { path: '/user/:id', component: User } ] B.在对应的页面通过以下方式获取值 console.log(this.$route.pa... -
vue3路由跳转传值,接收值
2022-03-16 14:37:48路由传值及接收值 -
vue的路由传值query方法
2019-07-01 17:51:00在传值的页面进行router-link的包裹(需要穿哪一块就包裹那一块),<router-link :to="{name:“”,query:{sid:sid}}"(键值对,name和query是固定的,name后面是去的路由地址。query是传的参数) tag="a"(这... -
vue2.x 常见路由传值
2022-02-14 10:43:22vue常见的两钟路由传值方式... router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'index', component: Index, redirect: '/... -
Vue 路由(vue-router)传值
2022-03-11 17:14:06有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转...const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] }) -
动态路由传值
2021-07-08 16:13:26//User.vue <h1>{{userId}}</h1> <script> export default { computed:{ userId(){ return this.$route.param.abc//$route获取到正在活跃的路由 } } } </script> ... -
vue路由的传值
2021-07-11 18:01:25vue中this.$router.push()路由传值和获取的两种常见方法 1、路由传值 this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退... -
vue 路由传值的4种方法
2019-06-16 12:48:44对应的路由配置模块 1、使用router.push拼接参数传参this.router.push 拼接参数传参 this.router.push拼接参数传参this.router.push(’/editCardetail?editType=add’) 2 当点击 时,这个方法会在内部调用,即点击... -
vue Router 动态路由传值 与Get传值
2018-12-19 22:12:00方式一:动态路由传值 1、定义路由规则 import Newcontent from './components/NewContent.vue'; //2、配置路由 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog ... -
Vue.js路由功能以及动态路由下的url传值和get传值
2018-10-14 20:15:08本文记录Vue.js如何使用路由功能(包括设置默认路由、路由跳转)以及使用动态路由(url传值)和get传值。 Vue.js下使用路由功能 要使用路由功能必须先在项目中安装官方提供的vue-router库,cmd进入项目文件夹,... -
跨vue路由传值
2020-06-11 12:31:29跨vue路由传值(A跳转到B,B接收A的参数) 1.A页面 2. 路由配置(component为B页面路径) 3. B页面取值 -
vue路由传值及接收传递数据
2018-07-16 10:24:29传递数据 <template> <div id="app"> <router-link :to="{path: '/page', query:{page}}...router-link传值</router-link> <div @click='goPage()'>方法传值</div> </div...
收藏数
9,987
精华内容
3,994