1.动态路由传值

在我这个项目里要实现的是从 News.vue 跳转到Content.vue

News.vue

<template>
 <!-- 所有的内容要被根节点包含起来-->
 <div id="news">
     我是一个新闻组件
     <br>
     
    <ul>
        <li v-for="(item,key) in list">
            <router-link :to="'/content/'+key">{{key}}---{{item}}</router-link>
            <!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
        </li>
    </ul>
 </div>
</template>

<script>

export default {
 data(){
     return {
         msg:'我是一个news组件',
         list:['111','222','333']
     }
 }
 
}
</script>

Content.vue （主要是第16行和第17行）

<template>
    <div id="content">
        我是详情页面
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:"数据"
        }
    },
    mounted(){
        console.log(this.$route.params);//获取动态路由传值
    }
}
</script>

在main.js 中配置路由（第16行与第23行）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },/* 动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

最后在控制台中你可以看到：

点了 key=2 的内容，获取了aid。

2.get传值

在这里我要实现的是从 Home.vue 跳转到 Pcontent.vue

Home.vue(主要为第8行)

<template>
    <!-- 所有的内容要被根节点包含起来-->
    <div id="home">
        我是首页组件
        <br>
        <ul>
        <li v-for="(item,key) in list">
            <router-link :to="'/pcontent?aid='+key">{{key}}---{{item}}</router-link>
        </li>
    </ul>
        
    </div>
</template>  

<script>

export default {
    data(){
        return {
            msg:'我是一个home组件',
            list:['商品111','商品222','商品333']
        }
    }
    
}
</script>

Pcontent.vue(主要是第18行)

<template>
    <div id="pcontent">
        商品详情
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:"数据",
        }
    },
    mounted(){
        //get传值
        console.log(this.$route.query);
    }
}
</script>

在main.js 中配置路由（第17行与第24行）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

//导入并使用
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.config.productionTip = false

//1.创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';

//2.配置路由  注意，名字一定不能错
const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content },/* 动态路由*/
  { path: '/pcontent', component: Pcontent },
  { path: '*', redirect: '/home' }//默认跳转路由
]

//3.实例化VueRouter  注意，名字一定不能错
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4.挂载路由

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//5.根组件的模板里放上这句话  <router-view></router-view>

最后的效果是这样的：

为方便大家查看，我放上根组件和我的目录结构
这是App.vue 根组件

<template>
  <div id="app">
    
    <router-link to="/home">Go to Home</router-link>
    <router-link to="/news">Go to News</router-link>
    
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
/** 1不同路由传值，动态路由
 * 
 * 
 * (1).配置动态路由
 * routes:[
 *      //  动态路径参数 以冒号开头
 *      {path: '/user/:id',component:User}
 * ]
 * 
 * (2).在对应的页面
 * this.$route.params 获取动态路由的值
 * 
 * 
 * 2.get传值
 * 
 * 
 * (1).配置动态路由
 * routes:[
 *      //  动态路径参数 以冒号开头
 *      {path: '/user',component:User}
 * ]
 * 
 * (2).在对应的页面
 * this.$route.query 获取动态路由的值
 * 
 */
export default {
  name: 'App',
  data(){
    return{
      msg:'你好vue'
    }
  }
  
}
</script>

<style>

</style>

目录结构

若有任何疑问或是不解请在下方评论，谢谢。