16、不同路由传值

示例：新闻列表页→新闻详情页传值

一、动态路由

1、配置动态路由

main.js代码及截图

// 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 VueResource from 'vue-resource'
import VueRouter from 'vue-router'

Vue.use(VueResource);
Vue.use(VueRouter);

import Home from './components/Home.vue';
import News from './components/News.vue';
import Detail from './components/Detail.vue';

//建议不要修改routes名称，避免出错
const routes = [
  {path: '/home', component: Home},
  {path: '/news', component: News},
  //动态路径参数，以冒号开头
  {path: '/detail/:aid', component: Detail},
  //默认跳转路由，若路由匹配不到，则跳转到首页
  {path: '*', redirect: '/home'}
]

const router = new VueRouter({
  //routes简写方式，相当于routes:routes
  routes
})

Vue.config.productionTip = false

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

2、获取参数值：this.$route.params.参数名

News.vue代码：传值

<template>
  <div>
    <h2>{{title}}</h2>
    <hr/>
    <ul>
      <li v-for="news in newsList">
        <router-link :to="'/details/'+news.aid"></router-link>
        {{news.title}}
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        title: "新闻组件",
        newsList: []
      }
    },
    mounted() {
      let api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      this.$http.get(api).then((response) => {
        console.log(response.body.result);
        this.newsList = response.body.result;
      }, (response) => {
        console.log(response);
      })
    }
  }
</script>

Detail.vue代码：获取值

<template>
  <div>
    <h2>{{newsTitle}}</h2>
    <h3 v-html="newsContent"></h3>
  </div>
</template>

<script>
  export default {
    name: "Detail",
    data() {
      return {
        newsTitle: '',
        newsContent: ''
      }
    },
    mounted() {
      let aid = this.$route.params.aid;
      let api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid;
      this.$http.get(api).then((response) => {
        console.log(response);
        let news = response.body.result[0];
        this.newsTitle = news.title;
        this.newsContent = news.content;
      }, (response) => {
        console.log(response);
      });
    }
  }
</script>

 二、Get传值

1、配置路由

main.js代码及截图

// 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 VueResource from 'vue-resource'
import VueRouter from 'vue-router'

Vue.use(VueResource);
Vue.use(VueRouter);

import Home from './components/Home.vue';
import News from './components/News.vue';
import Detail from './components/Detail.vue';

//建议不要修改routes名称，避免出错
const routes = [
  {path: '/home', component: Home},
  {path: '/news', component: News},
  {path: '/detail', component: Detail},
  //默认跳转路由，若路由匹配不到，则跳转到首页
  {path: '*', redirect: '/home'}
]

const router = new VueRouter({
  //routes简写方式，相当于routes:routes
  routes
})

Vue.config.productionTip = false

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

2、获取参数值：this.$route.query.参数名

News.vue代码：传值

<template>
  <div>
    <h2>{{title}}</h2>
    <hr/>
    <ul>
      <li v-for="news in newsList">
        <router-link :to="'/detail?aid='+news.aid">
          {{news.title}}
        </router-link>
      </li>
    </ul>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        title: "新闻组件",
        newsList: []
      }
    },
    mounted() {
      let api = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      this.$http.get(api).then((response) => {
        console.log(response.body.result);
        this.newsList = response.body.result;
      }, (response) => {
        console.log(response);
      })
    }
  }
</script>

Detail.vue代码：获取值

<template>
  <div>
    <h2>{{newsTitle}}</h2>
    <h3 v-html="newsContent"></h3>
  </div>
</template>

<script>
  export default {
    name: "Detail",
    data() {
      return {
        newsTitle: '',
        newsContent: ''
      }
    },
    mounted() {
      let aid = this.$route.query.aid;
      let api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid;
      this.$http.get(api).then((response) => {
        console.log(response);
        let news = response.body.result[0];
        this.newsTitle = news.title;
        this.newsContent = news.content;
      }, (response) => {
        console.log(response);
      });
    }
  }
</script>