vue Router 动态路由传值 与Get传值

方式一：动态路由传值

一、定义路由规则

import Newcontent from './components/NewContent.vue';
//二、配置路由
const routes = [
{ path: '/new', component: News },
{ path: '/blog', component: Blog },
//动态路由传值
{ path: '/newcontent/:Id', component: Newcontent },
//表示若是没有匹配上路由就跳转到new
{ path: '/*', redirect: '/new' }
]

二、拼接数据连接

<ul v-for="(item,key) in list">
    <li >
        <router-link :to="'/newcontent/'+key"> {{item}}</router-link>
       
    </li>
    
</ul>

注意：绑定动态数据是:冒号，而且是拼接字符串。这样就能够实现动态绑定路由传值

三、获取动态路由传递值

this.$route.params.Id

方式二：get传值

一、配置路由

//二、配置路由
const routes = [
{ path: '/new', component: News }, { path: '/blog', component: Blog }, //get传值 { path: '/newcontent', component: Newcontent }, //表示若是没有匹配上路由就跳转到new { path: '/*', redirect: '/new' } ]

二、数据格式

<h2>Get传值</h2>
<ul v-for="(item,key) in list">
    <li >
        <router-link :to="'/newcontent?Id='+key"> {{item}}</router-link>
       
    </li>
    
</ul>

 

三、获取传值方式

this.$route.query

 

 

以上两种方式传值，传值是注意拼接连接