Vue学习18----动态路由传值及get传值（跳转及传值，相当于a标签）

在上一讲 https://blog.csdn.net/zhaihaohao1/article/details/89051936 配置好路由基础上，进行动态路由传值和get传值
动态路由传值实现步骤：
1、在 main.js中，配置动态路由

 { path: '/content/:aid', component: Content },

2、发送数据

{{item}}

3、在对应的页面，接收数据

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

get传值实现步骤：
1、在 main.js中，配置动态路由

 const routes = [
  { path: '/newscontent', component: NewsContent },
]

2、发送数据

{{key}}--{{item}}

3、在对应的页面，接收数据

this.idata =this.$route.query.id;

下面写一个例子
效果图：

项目结构：

Home.vue把数据传到HomeContent.vue
News.vue把数据传到NewsContent.vue
main.js

// https://router.vuejs.org/zh/
//
// vue路由配置：
// 1.安装
// npm install vue-router  --save   / cnpm install vue-router  --save
//
// 2、在main.js中，引入并 Vue.use(VueRouter)
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)
//
// 3、在main.js中，配置路由
// 3.1、创建组件 引入组件
// import Home from './components/Home.vue';
// import News from './components/News.vue';
// 3.2、定义路由  （建议复制s）
// const routes = [
//   { path: '/foo', component: Foo },
//   { path: '/bar', component: Bar },
//   { path: '*', redirect: '/home' }   /*默认跳转路由*/
// ]
//
// 3、在main.js中，实例化VueRouter
// const router = new VueRouter({
//   routes // （缩写）相当于 routes: routes
// })
//
// 4、在main.js中，挂载
//
// new Vue({
//   el: '#app',
//   router，
//   render: h => h(App)
// })
//
// 5 、在App.vue中，根组件的模板里面放上这句话
// 
//
//
// 6、在App.vue中，路由跳转
// Go to Foo
// Go to Bar

import Vue from 'vue';
import App from './App.vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);


import Home from './components/Home.vue';
import News from './components/News.vue';
import HomeContent from './components/HomeContent.vue';
import NewsContent from './components/NewsContent.vue';


const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/homecontent/:aid', component: HomeContent },
  { path: '/newscontent', component: NewsContent },

  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


//5  放在 App.vue

App.vue

Home.vue

HomeContent.vue

News.vue

NewsContent.vue

源码下载：
vuedemo18
https://download.csdn.net/download/zhaihaohao1/11112029