VUE 页面传参、页面跳转

方案一：query参数传递

 1、router定义

routes: [
    {
      path: '/soft',
      name: '软件详情',
      component: PannelContent
    },
]

 2、页面参数接收

 created()
  {
    this.soft = this.$route.query.id;
  }

备注1： 从前端页面传参跳转

跳转至easyicon

 备注2： 从后端代码传参跳转

this.$router.push({ path: '/soft', query: { id: 'easyicon' }});

---

方案二：path参数传递

  1、router定义

routes: [
    {
      path: '/soft/:id',
      name: '软件详情',
      component: PannelContent
    },
]

 2、页面参数接收

  created()
  {
    this.soft = this.$route.params.id;
  }

 备注1： 从前端页面传参跳转

跳转至easyicon

 备注2： 从后端代码传参跳转

this.$router.push({ name: '/soft', params: { id: 'easyicon' }});

---

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'
import PannelContent from '@/components/PannelContent.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect:'/home'
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    },
    
    {
      path: '/soft',
      name: '软件详情',
      component: PannelContent
    },
    // {
    //   path: '/soft/:id',
    //   name: '软件详情',
    //   component: PannelContent
    // },

  ]
})