vue动态路由配置及路由传参的方式

动态路由：

　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据

　　这就要用到动态路由跟路由传参了！

首先我们来了解下router-link这个组件：

　　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到

　　并且当一个导航器被激活的时候，会自动加上一个css的激活样式，可以全局在路由配置中设置linkActiveClass属性，属性名就是样式css名，一般写为active

　　现在基本了解了router-link，先讲一下动态路由配置吧

我们在配置路由的时候，将目标组件的路径先配置好，如：

比如多个路由都要进入List组件，这时候在配置路由路径后加个:id(id可随便取名，标识),这个属性id可以在$route.params.id中获取，例如：

当前这个child组件要进入，以上配置的id就等于on；这时候在List组件中打印出$route.params.id就可以得到这个属性值on

这个时候，不同组件进入同一目标组件时就可以得到标识跟备注了，也可以利用这个来传递一些正常的参数

接着往下看，带参数的路由，跟获取传来的参数值

当router-link被激活点击时，会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

传参数的时候，我们就写成对象的形式，用到v-bind的js表达式

此时整个的理解可以为：我是child组件过来的，而且我还带来了我的名字，我叫child

在List组件当中去获取这个参数值跟id的值

如果是不同的组件过来的，可以设置不同的id值，只要在目标组件获取属性id的值就可以了，参数就利用query.属性值来获取。

总结

以上所述是小编给大家介绍的vue动态路由配置及路由传参的方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 使用Vue调取接口,并渲染数据的示例代码

    刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • vue2.0 获取从http接口中获取数据,组件开发,路由配置方式

    vue 2.0 从接口中获取数据 <template> <div id="admins"> <h1>I am a title.</h1> <a> written by {{ author }} </a> <div v-for="admin in users"> {{admin.name}}<br>{{admin.password}} </div> </d

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • 详解vue beforeRouteEnter 异步获取数据给实例问题

    场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页.还是 B 页,还是留在本页:而如果留在本页的话,还需要在 mounted 根据 mockData 来判断显示哪种状态(可以在本页面实例创建后,重新发起 http 请求获取 mockData ,但是没有必要,造成代码冗余): 执行顺序: async beforeRouteEnter(to, from, next) { let res

  • vue动态路由配置及路由传参的方式

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就可以渲染不同的标签,可以浏览器端查看到 并且当一个导航器被激活的时候,会自动加上一个css的激活样式,可以全局在路

  • Vue-CLI项目中路由传参的方式详解

    一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="`/course/detail

  • vue3中使用router路由实现跳转传参的方法

    目录 前言 一.路由跳转 二.页面传参需要注意 总结 大家好,今天和大家分享一下vue3中如何进行跳转并进行传参. 前言 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同.我们今天主要讲router.push(location, onComplete?, onAbort?)vue3中新增API:useRouter和useRoute 一.路由跳转 1.首先在需要跳转的页面引入API—useRouter import { useRouter } from 'vue-router'

  • vue打开新窗口并实现传参的图文实例

    vue打开新窗口并实现传参的图文实例

    我要实现的功能是打开一个新窗口用来展示新页面,而且需要传参数,并且参数不能显示在地址栏里面,而且当我刷新页面的时候,传过来的参数不能丢失,要一直存在,除非我手动关闭这个新窗口,即浏览器的标签页. 通过面向百度编程,发现网上的根本达不到这个效果,而且还都是坑,明明实现不了,还若有其事的写出来,于是我在标题特意加上有图有真相,诚我不欺,实现不了功能,就不要出来糊弄人. 先把我做好的代码写出来,后面再介绍别人实现不了的坑,以及这方面相关要注意的. 打开新窗口并传参代码 //打开新窗口并传参,参数不能显

  • Vue + Axios 请求接口方法与传参方式详解

    目录 一.Get请求: 二.Post请求: 三.拓展补充 使用Vue的脚手架搭建的前端项目,通常都使用Axios封装的接口请求,项目中引入的方式不做多介绍,本文主要介绍接口调用与不同形式的传参方法. 一.Get请求: Get请求比较简单,通常就是将参数拼接到url中 用? &连接或者用下面这种方式: this.axios.get(this.getWxQyUserInfoUrl, { params: { agentid: this.doLoginParams.agentid, code: this

  • vue.js 父向子组件传参的实例代码

    vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • js 动态生成html 触发事件传参字符转义的实例

    通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 "单.双引号不够用" 的情况,别急,这时可以利用 html 语言中的转义字符来解决. 下面就来介绍一下相应的转义字符吧: & -- (ampersand) 转义字符对应为   & "   -- (double quote) 双引号,转义字符对应为  " '  -- (single quote)单引号,转义字符对应为  ' <  -- (l

  • vue.js  父向子组件传参的实例代码

    vue.js  父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    目录 vue中form data形式传参 vue文件提交 FormData方式 前驱知识 FormDate FormData的使用 URL 实操 vue中form data形式传参 vue项目中form data形式传参,需要在headers中添加如下代码 headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } 接口请求如下: export function subFaq (params) {

  • vue计算属性computed方法内传参方式

    vue计算属性computed方法内传参方式

    目录 vue计算属性computed方法内传参 计算属性computed与method的区别 什么是计算属性? computed实例 computed与method的区别 关于传参问题 vue计算属性computed方法内传参 遇到头疼的vue计算属性传参问题 经过各种资料查找,亲测有效 index.vue <van-circle       v-model="Ratedata[index].currentRate"          color="#2462E8&qu

随机推荐