内容:动态路由传值和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;