vue router传参方式、接受方式

三：冒号的形式传递传参

优势：页面刷新参数不会丢失， 劣势: 需要一一配置

在router路由配置文件里路径后面加上传递的参数： /:id/:title

{
 path: '/infoDetailed/:id/:title',
  name: "InfoDetailed",
  hidden: true,
  meta: {
    name: "信息详情"
  },
  component: ()=> import("../views/Info/detailed")
}

在.vue文件里：
传参数方式：

methods: {
	//路由跳转传参
	lookCategoryItem(data) {
	  this.$router.push({
	    path:`/infoDetailed/${daata.id}/${data.title}`
	  })
	}
}

接收方式：
可以直接在template标签上接收，但不建议
{{ $route.params.newsId }}
{{ $route.params.newsTitle }}

四： vuex结合HTML本地存储

优势：参数不显示， 劣势: 稍微有点大材小用（解决第二种传参参数丢失）

在store文件下创建一个 modules 文件，文件下在创建一个infoDetailed.js文件

infoDetailed.js：

const state = {
    // 定义变量
     // 一开始跳转时，这里的 id值 和 title值 是从跟下面mutations里SET_ID方法获取的，
     // 刷新页面时，因为是使用this.$router.push({name: 'InfoDetailed', params: {id: data.id,title: data.title}})，这种方式去跳转传参的，页面刷新时不会保留数据，
    //  页面刷新后，vuex的值就不存在了，然后获取到的值是空值的时候，就从本地存储中获取
    id: '' || JSON.parse(sessionStorage.getItem('infoId')), 
    title: '' || JSON.parse(sessionStorage.getItem('infoTitle'))
}
const getters = {
	// 从这里就知道是否拿到值了, 配置好这里，就可以在页面中获取值了
    infoId: state => state.id,
    infoTitle: state => state.title
}
const mutations = {
	// 比较传统的方法
    // 把传进来的值存储起来
    SET_ID (state, value) {
        // 把传进来的值赋值给上面state定义的变量中
        state.id = value
        // HTML5本地存储,把传过来的值存到本地, 因为本地存储只能存储的是字符串类型的数据，
        // 所以需要用 JSON.stringify(value) 把格式转换一下
        sessionStorage.setItem('infoId', JSON.stringify(value))
    },
    SET_TITLE (state, value) {
        state.title = value
        // HTML5本地存储,把传过来的值存到本地
        sessionStorage.setItem('infoTitle', value)
    },
    // 改良的方法, 二选一
    UPDATE_STATE_VALUE (state, params) {
        // JSON的 (for in) 循环方法
        for (let key in params) {
            // 因为传过来的值是一一对应的，所以
            // 存值
            state[key] = params[key].value
            // 是否存储session
            if (params[key].session) {
                // HTML5本地存储,把传过来的值存到本地
                sessionStorage.setItem(params[key].sessionKey, params[key].value)
            }
        }
    }
}
const actions = {

}

export default {
    namespaced: true, // 解决命名空间问题，防止命名冲突
    // 把上面的都暴露出去
    state,
    getters,
    mutations,
    actions
}

然后，在store文件下的index.js文件中引入

index.js:：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import app from './modules/app.js'
import login from './modules/login.js'
import common from './modules/common.js'
// 路由跳转传参
import infoDetailed from './modules/infoDetailed'

export default new Vuex.Store({
  modules: {
    app,
    login,
    common,
    infoDetailed
  }
});

跳转后的页面index.vue 页面：

// 方法
  methods: {
    getData () {
      1./**
       * 当页面刷新时，所有的值全部都被清空了，vuex和sessionStorage的都被清空了，为什么呢？
       * 因为这里的代码又被执行了一次，当再次执行时，已经拿不到  this.$route.params.id  这个值了，因为传参方式页面刷新不保留
       * 然后执行 this.$store.commit('infoDetailed/SET_ID', id)和
       * this.$store.commit('infoDetailed/SET_TITLE', title) 时，是空的
       */
      //  进来发现 this.$route.params.id 有值，就使用，没有，则执行后面  this.$store.getters['infoDetailed/infoId'] 拿值
      //          vuex的值                          sessionStorage的值
      let id = this.$route.params.id || this.$store.getters['infoDetailed/infoId']
      let title = this.$route.params.title || this.$store.getters['infoDetailed/infoTitle']
      // console.log('id' + id)
      // console.log('title' + title)
      // 调用store/modules/infoDetailed.js里的 SET_ID 和 SET_TITLE 这两个方法
      2. // 这两行代码放到跳转前的页面里，看下面 ⬇
      // this.$store.commit('infoDetailed/SET_ID', id)          
      // this.$store.commit('infoDetailed/SET_TITLE', title)
      
      console.log('infoId:' + this.$store.getters['infoDetailed/infoId'])
      console.log('infoTitle:' + this.$store.getters['infoDetailed/infoTitle'])
    }
  }

跳转前的页面 index.vue:

// 查看信息列表
lookCategoryItem(index, data) {
  console.log('跳转信息详情页',  data )
  3.// 所以把存值的步骤放到这里来
  // this.$store.commit('infoDetailed/SET_ID', data.id)
  // this.$store.commit('infoDetailed/SET_TITLE', data.id) 

// 改良的方法, 二选一
  this.$store.commit('infoDetailed/UPDATE_STATE_VALUE',  {
    id: {
      value: data.id,
      sessionKey: 'infoId',
      session: true
    },
    title: {
      value: data.title,
      sessionKey: 'infoTitle',
      session: true
    }
  });
  this.$router.push({
    name: 'InfoDetailed',
    params: {
      id: data.id,
      title: data.title
    }
  })
}

五、新窗口打开

优势：参数不显示， 劣势: 稍微有点大材小用（解决第二种传参参数丢失）

这种方法用的比较少，因为vue是一个单页面应用，所以不是很符合，但有些特殊情况需要用到，还是要这么做

HTML标签传参方法

<router-link tag="a" target="_blank" to="{name:'searchGoods', params: {catId: 0}, query: {keywords: '手机'}}">热门好货</router-link>

注意： vue1 不支持

js传参方法

 let routerData = this.$route.resole({
    name: "searchGoods",
    // 第一种传参方式
    query: params,
    // 第二种传参方式， 两者二选一
    params: {
      catId: params.catId
    }
  })

获取数据方法

window.open(routerData.href, '_blank')