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

 

 

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