Vue兄弟组件间传值 之 get传值

第一步：在新建的views目录下创建如下所示的两个组件：

• News.vue

  
    {{msg}}
    
      
        {{index}}-{{item}}
      
    
  


  export default {
    data() {
      return {
        msg: 'News头部',
        titles:['aaaa','bbbb','cccc','dddd']
      }
    }
  }

• Details.vue

  
    News Details
  


  export default {
    name: "News Details",
    data() {
      return {
        msg: 'Details'
      }
    },
    mounted(){
      console.log(this.$route.query); //获取Get传值
    }
  }

第二步：router目录下的index.js

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

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

import News from  './views/News';
import Details from  './views/Details';

const routes = [
  { path: '/news', component: News },
  { path: '/details', component: Details }, 
  { path: '*', redirect: '/news' }   /*默认跳转路由*/
]
const router = new VueRouter({
  routes
})
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})