vue Router 动态路由传值 与Get传值
方式一:动态路由传值
1、定义路由规则
import Newcontent from './components/NewContent.vue'; //2、配置路由 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog }, //动态路由传值 { path: '/newcontent/:Id', component: Newcontent }, //表示如果没有匹配上路由就跳转到new { path: '/*', redirect: '/new' } ]
2、拼接数据链接
<ul v-for="(item,key) in list"> <li > <router-link :to="'/newcontent/'+key"> {{item}}</router-link> </li> </ul>
注意:绑定动态数据是:冒号,并且是拼接字符串。这样就可以实现动态绑定路由传值
3、获取动态路由传递值
this.$route.params.Id
方式二:get传值
1、配置路由
//2、配置路由
const routes = [
{ path: '/new', component: News },
{ path: '/blog', component: Blog },
//get传值
{ path: '/newcontent', component: Newcontent },
//表示如果没有匹配上路由就跳转到new
{ path: '/*', redirect: '/new' }
]
2、数据格式
<h2>Get传值</h2> <ul v-for="(item,key) in list"> <li > <router-link :to="'/newcontent?Id='+key"> {{item}}</router-link> </li> </ul>
3、获取传值方式
this.$route.query
以上两种方式传值,传值是注意拼接链接