18.vue动态路由传值和get传值

内容：动态路由传值和get传值
一、动态路由传值
（1）新建并引入组件：新建需要动态路由传值得组件，并再main.js中引入

import News from './components/News.vue'
import content from './components/content.vue'

（2）在路由静态变量中添加跳转路径以及对应得组件名称，添加格式为

 {path:'/content/:aid',component:content}，aid是动态参数，动态路径参数以冒号开头

const routes=[
  {path:'/home',component:Home},
  {path:'/news',component:News},
  {path:'/content/:aid',component:content}
]

（3）在组件中进行定义，这里我们是在news组件中点击，然后动态获取路由

  <div>我是新闻组件
      <ul>
        <li v-for='(item,key) in list'>
            <router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>

            </li>
     </ul>
    </div>

（4）在content组件中进行获取动态路由传值，在生命周期函数中获取动态路由传值得格式为this.$route.params；

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

二、get传值方式传值

（1）新建并引入组件：新建需要动态路由传值得组件，并再main.js中引入

import Home from './components/Home.vue'
import shopcontent from './components/shopcontent.vue'

（2）在路由静态变量中添加跳转路径以及对应得组件名称，添加格式为
get传值得时候定义路径正常定义不需要像动态路由一样设置参数

{path:'/home',component:Home},
{path:'/shopcontent',component:shopcontent}

（3）在组件中进行定义
get传值需要在调用组件中得调用路径中加上问号，问号后添加参数

<div>我是HOME组件
        <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/shopcontent?aid='+key" >{{item}}</router-link>
            </li>
        </ul>
    </div>

（4）在shopcontent组件中进行获取路由传值，在生命周期函数中获取动态路由传值得格式为this.$route.query；