【vue】常见的路由传参&无刷新修改当前路由url带参_vue修改url参数_托尼沙滩裤的博客

相关文章推荐

飞翔的遥控器 · “能源、环境与商业文明国际会议”在四川大学隆 ...· 1 月前 ·

爱旅游的跑步鞋 · 炼金工坊之八 - 知乎· 1 年前 ·

打酱油的小虾米 · 地下偶像迅雷云盘分享 - 抖音· 1 年前 ·

飘逸的感冒药 · 驻哥斯达黎加大使汤恒出席哥企业集团创新流程管 ...· 1 年前 ·

憨厚的钥匙 · 五河草根作家刘景良先生长篇小说——《仙女传说 ...· 1 年前 ·

1、声明式 router-link

该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例如：

//子路由配置
  path: '/child/:id',
  component: Child
//父路由组件
<router-link :to="/child/123">进入Child路由</router-link>
2、编程式 this.$router.push 
 使用该方式传值的时候，同样需要子路由提前配置好参数，例如： 
//子路由配置
  path: '/child/:id',
  component: Child
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    path:'/child/${id}',
 注：在子路由中可以通过{this.$route.params.id}来获取传递的参数值 
方式二：params 传参（不显示参数）
 
 params 传参（不显示参数）也可分为 声明式 和 编程式 两种方式
 与方式一不同的是:这里是通过路由的别名 name 进行传值的 
1、声明式 router-link 
 该方式也是通过 router-link 组件的 to 属性实现，例如： 
<router-link :to="{name:'Child',params:{id:123}}">进入路由</router-link>
2、编程式 this.$router.push 
 使用该方式传值的时候，同样需要子路由提前配置好参数，不过不能再使用 :/id 来传递参数了，因为父路由中，已经使用 params 来携带参数了 
//子路由配置
  path: '/child,
  name: 'Child',
  component: Child
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    params:{
    	id:123
 注：在子路由中可以通过[this.$route.params.id]来获取传递的参数值，上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失 
方式三：query 传参（显示参数）
 
 query 传参（显示参数）也可分为 声明式 和 编程式 两种方式 
1、声明式 router-link 
 该方式也是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名（name 属性） 
//子路由配置
  path: '/child,
  name: 'Child',
  component: Child
//父路由组件
<router-link :to="{name:'Child',query:{id:123}}">进入Child路由</router-link>
2、编程式 this.$router.push 
 使用该方式传值的时候，同样需要子路由提前配置好路由别名（name 属性），例如： 
//子路由配置
  path: '/child,
  name: 'Child',
  component: Child
//父路由编程式传参(一般通过事件触发)
this.$router.push({
    name:'Child',
    query:{
    	id:123
 在子路由中可以通过this.$route.query.id来获取传递的参数值 
无刷新修改当前路由url带参
 
 vue 改变路由（URL）参数不刷新页面 

 1.常规使用方法
  
this.$router.push(`${this.$route.path}?tab=${id}`)
2.还有一种方法是引入webpack-merge
  
import merge from 'webpack-merge'；
修改原有参数        
this.$router.push({
    query:merge(this.$route.query,{'maxPrice':'630'})
新增一个参数：
this.$router.push({
    query:merge(this.$route.query,{'addParams':'我是新增的一个参数，哈哈哈哈'})
替换所有参数：
 this.$router.push({
    query:merge({},{'maxPrice':'630'})
                    vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。而有的时候需要vue 改变路由（URL）参数但是不需要刷新页面，就是文章内的方法...
今天在做一个vue的搜索功能，需要从搜索结果页面跳转到细节页面，然后点击返回还能返回到刚刚的结果页面，如果只用window.history.go(-1)当然会重新刷新搜索页面，当然是不行的。
我尝试了俩种方式来修改url:
    [removed].href,拼接一个搜索的key值，点击搜索的同时，刷新了页面，url改变了，功能是实现了，可是bug来了…，搜索页面闪烁后才进入结果页，而结合不跳转页面就不会发生闪烁的情况，所以当页面刷新时，vue实例都会被重新加载。
    [removed].hash,url中#为网页中的一个位置，当读取此url时，页面会自动滚
一 新建editRouteQuery.js文件
//共接收2个参数  route对象，参数对象 参数值需为null
export const editRouteQuery = (route, query = null) => {
  const _old = route.query
  let _new = query
  if (query) {
    _new = Object.assign({}, _old, query)
  for (let 
				动态路由：
　　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个”共用”的组件，并且还要传参数，渲染不同的数据
　　这就要用到动态路由跟路由传参了！
首先我们来了解下router-link这个组件：
　　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到
　　并且当一个导航器被激活的时候，会自动加上一个css的激活样式，可以全局在路由配置中设置linkActiveClass属性，属性名就是样式css名，一般写为active
				在项目中，比如进入我的订单页面，订单页面有不同的几个菜单，如：待付款、待发货、待收货、待收货等；
我们想要实现从不同的菜单点击进入订单详情页，再返回订单列表的时候，还是定位在之前对应的菜单，这时候就需要用到替换路由参数。
我们可以在执行点击菜单的时候，就替换掉路由地址的参数，以便于之后返回该订单列表的时候，还是定位在对应的菜单项。
替换路由地址参数，代码执行如下：
this.$router.replace({ name: 'Orders', params: { tabId: index } })
什么是sessionStorage？
SessionStorage是HTML5引入的一种web存储API，它是独立于文档及其它数据之外的专用储存区域，这块区域的数据只有在同源的页面间才能被共享。
sessionStorage和localStorage的区别是什么？sessionStorage的数据只有在同源的页面间才能被共享，而localStorage的数据可以跨域共享。另外，SessionStorage的存储数据在浏览器关闭后会清除，而LocalStorage的存储数据会永久保存，除非被手动删除。
如何存储数据到sessionStorage？使用setItem()方法来存储数据到sessionStorage：sessionStorage.setItem("key", "value");
如何取出sessionStorage中的数据？
使用getItem()方法来取出sessionStorage中的数据： sessionStorage.getItem("key");
怎么让sessionStorage跨页面共享数据？
sessionStorage不支持跨页面共享数据，多个页面可以使用localStorage来共享数据。