Vue动态路由传值和Get传值

Vue动态路由：在一个页面获取上一个页面的传值

1：配置动态路由步骤：

const routes = [

//（main.js文件中）

              { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头

            ]

在上一个页面中配置{{key}}---{{item}}

2：在对应的页面

this.$route.params获取动态路由的值

代码示例：

//main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Home from './components/Home'
import News from './components/News'
import Content from './components/Content'
import Product from './components/Product'

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News },
                { path: '/Product', component: Product },//get传值
                { path: '/Content/:aid', component: Content }//动态路由
               
              ]
  // 实例化路由
  const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
  })
Vue.use(VueRouter)
Vue.use(VueResource)

new Vue({
  el: '#app',
  // 将路由实例挂载到vue实例上
  router,
  render: h => h(App)
})

传值页面：

获取值的页面：

Get传值：

//传值页面

获取值的页面：

main.js页面：

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News },
                { path: '/Product', component: Product },//get传值
                { path: '/Content/:aid', component: Content }//动态路由
               
              ]