vue学习笔记-动态路由和get传值（16）

动态路由和get传值

接着笔记15开始，新建一个详情组件，并在main.js里面配置好路由。

//创建组件并引入
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue'

//配置路由
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/content/:aid', component: Content }, /* 动态路由 */
  { path: '*', redirect: '/home' }   /*默认跳转路由*/
]

news组件里面 将索引值index传给content组件 代码如下：

<template>
  <div id="news">
    {{msg}}
    <ul>
    	<li v-for="(item,index) in list" :key=index>
        <router-link :to="'/content/'+index">{{index}}--{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'我是新闻组件',
        list:[
          '新闻1','新闻2','新闻3'
        ]
      }
    }
  }
</script>

在content组件里面获取news组件的传值

mounted(){
      console.log(this.$route.params);/* 获取动态路由传值 */
    }

点击li效果如下图：

get传值及获取传值

新建一个product组件，在home组件里面做跳转；
目标还是将索引值index传给product组件
首先在main.js里面引入组件

{ path: '/product', component: Product },

home组件代码如下

<template>
  <div>
    {{msg}}
    <br>
    <ul>
    	<li v-for="(item,index) in list" :key=index>
        <router-link :to="'/product?aid='+index">{{index}}--{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'我是home组件',
        list:[
          '商品1','商品2','商品3'
        ]
      }
    }
  }
</script>

在product获取传值

mounted(){
      console.log(this.$route.query)
    }

点击li控制台输出如下：