方式一（動態(tài)路由法）：

image.png

步驟：
1、配置動態(tài)路由（main.js）
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/detail/:id',component:Detail},//動態(tài)匹配路由 /：id
{path:'*',component:Home},
]

image.png

2、在需要動態(tài)跳轉(zhuǎn)的頁面中（Datail.vue）
this.$route.params;//獲取動態(tài)路由的值{id:xx}

image.png

3、配置動態(tài)路由入口（News.vue）
<li v-for="(item,key) in news_list">
<router-link :to="'/detail/'+key">{{key}}--{{item}}</router-link>
</li>

image.png

方式二（get傳值法）：
步驟：
1、配置動態(tài)路由（main.js）
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',component:Home},//默認跳轉(zhuǎn)路由
{path:'/shop',component:Shop},//和普通的一樣
]
]

image.png

2、在需要動態(tài)跳轉(zhuǎn)的頁面中（Shop.vue）
this.$route.query;//獲取動態(tài)路由的值{id:xx}

image.png

3、配置動態(tài)路由入口（Home.vue）
<ul>
<li v-for="(item,key) in shop_list">
<router-link :to="'/shop?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>

image.png