浅谈vue-router2路由参数注意的问题

1、vue 路由 如果传递 params 定义路由的时候是

 /路由名称：id

获取的时候

this.$route.params.id

最后形如

 /路由名称/路由参数

传参的时候

params:{
 str1:str1,
 str2:str2
}

2、如果传递query ?id=str.... 定义路由的时候直接是

 /路由名称

获取的时候

this.$route.query.id

传参的时候

data:{
 str1:str1,
 str2:str2
}

以上这篇浅谈vue-router2路由参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2 router 动态传参,多个参数的实例

    这个是用vue-cli生成的项目下使用 比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中 处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo

  • 详解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

  • Vue系列：通过vue-router如何传递参数示例

    使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

  • 浅谈vue 二级路由嵌套和二级路由高亮问题

    第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示: 在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示: 补充知识:vue - 子路由-路由嵌套 描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加

  • 浅谈Vue.js路由管理器 Vue Router

    起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • 浅谈Vue.js

    vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (

  • 浅谈vue 组件中的setInterval方法和window的不同

    vue组件中,this指向实例,[实例中重写了setInterval等一整套方法].所以,千万不能和 window 下挂载的方法混用 具体不同在于,window.setInterval执行完比后返回一个id,而vue实例中返回[定时器对象],当然该对象中包含一个_id的私有属性 因为 clearInterval 方法参数是id,所以最佳实践是统一使用 window 的方法,不要使用 vue组件的方法 vue中的定时器方法,要使用箭头函数,不要出现 const that = this 的写法 //

  • 浅谈Vue单页面做SEO的四种方案

    目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,

  • 浅谈Vue灰度发布新功能的使用

    目录 概述 组件级别 页面级别 方案一 新增入口页面分发 方案二 高阶组件方案 方案三 动态Router.js引入 总结 参考 什么是灰度发布?百度百科的解释如下. 灰度发布是指在黑与白之间,能够平滑过渡的一种发布方式.AB test就是一种灰度发布方式,让一部分用户继续用A,一部分用户开始用B,如果用户对B没有什么反对意见,那么逐步扩大范围,把所有用户都迁移到B上面来.灰度发布可以保证整体系统的稳定,在初始灰度的时候就可以发现.调整问题,以保证其影响度. 从上可以看出,灰度发布的主要作用有以下

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 浅谈vue权限管理实现及流程

    一.整体思路 后端返回用户权限,前端根据用户权限处理得到左侧菜单:所有路由在前端定义好,根据后端返回的用户权限筛选出需要挂载的路由,然后使用 addRoutes 动态挂载路由. 二.实现要点 (1)路由定义,分为初始路由和动态路由,一般来说初始路由只有 login,其他路由都挂载在 home 路由之下需要动态挂载. (2)用户登录,登录成功之后得到 token,保存在 sessionStorage,跳转到 home,此时会进入路由拦截根据 token 获取用户权限列表. (3)全局路由拦截,根据

  • 浅谈django channels 路由误导

    与django路由有区别 他们都有根路由,但是不一样. django的根路由: urlpatterns = [ path('login/',include('login.urls')), path('',views.home), path('helloapp/', include('helloapp.urls')), path('admin/', admin.site.urls), ] channels的根路由: 只能形如这种样子,URLRouter里面是一个列表,列表当中是具体路由条目. ap

随机推荐