17、Vue 配置动态路由

方式一（动态路由法）：

image.png

步骤：
1、配置动态路由（main.js）
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/detail/:id',component:Detail},//动态匹配路由 /：id
{path:'*',component:Home},
]

image.png

2、在需要动态跳转的页面中（Datail.vue）
this.$route.params;//获取动态路由的值{id:xx}

image.png

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

image.png

方式二（get传值法）：
步骤：
1、配置动态路由（main.js）
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'*',component:Home},//默认跳转路由
{path:'/shop',component:Shop},//和普通的一样
]
]

image.png

2、在需要动态跳转的页面中（Shop.vue）
this.$route.query;//获取动态路由的值{id:xx}

image.png

3、配置动态路由入口（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