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

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

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

2、发送数据

<router-link :to="/content/+key">{
  {item}}</router-link>

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

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

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

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

2、发送数据

<router-link :to="'/newscontent?id='+key">{
  {key}}--{
  {item}}</router-link>

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 in