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

 

 

以上兩種方式傳值，傳值是注意拼接連接