Vue兄弟组件间传值 之 get传值 #yyds干货盘点#

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

• News.vue

  <template>
  <div>
  <h2>{{msg}}</h2><br>
  <ul>
    <li v-for="(item ,index) in titles" :key="index">
      <router-link :to="'/details?nid='+index">{{index}}-{{item}}</router-link>
    </li>
  </ul>
  </div>
  </template>
  <script>
  export default {
  data() {
    return {
      msg: 'News头部',
      titles:['aaaa','bbbb','cccc','dddd']
    }
  }
  }
  </script>

• Details.vue

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

第二步：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)
})