方式一(动态路由法):
步骤:
1、配置动态路由(main.js)
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/detail/:id',component:Detail},//动态匹配路由 /:id
{path:'*',component:Home},
]
2、在需要动态跳转的页面中(Datail.vue)
this.$route.params;//获取动态路由的值{id:xx}
3、配置动态路由入口(News.vue)
<li v-for="(item,key) in news_list">
<router-link :to="'/detail/'+key">{{key}}--{{item}}</router-link>
</li>
方式二(get传值法):
步骤:
1、配置动态路由(main.js)
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',component:Home},//默认跳转路由
{path:'/shop',component:Shop},//和普通的一样
]
]
2、在需要动态跳转的页面中(Shop.vue)
this.$route.query;//获取动态路由的值{id:xx}
3、配置动态路由入口(Home.vue)
<ul>
<li v-for="(item,key) in shop_list">
<router-link :to="'/shop?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>