Vue 动态路由详解及实例
修改src/route/index.js文件中的path:import Vue from 'vue'import Router from 'vue-router'import GoodsList from '@/views/GoodsList'Vue.use(Router)export default new Router({mode: 'history',//加上...
·
修改src/route/index.js文件中的path:
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
Vue.use(Router)
export default new Router({
mode: 'history', //加上这一行访问地址中'傻逼'的 #/ 就可以去掉了
routes: [
{
// 传一个动态参数goodsId 写法(http://localhost:8080/goods/12)
// path: '/goods/:goodsId',
// 传两个动态参数 goodsId,name写法 (http://localhost:8080/goods/12/user/admin)
path: '/goods/:goodsId/user/:name',
name: 'GoodsList',
component: GoodsList
}
]
})
2、在组件中利用 $route.params.goodsId 来获取goodsId,拿到这个Id我们就能做很多事情了
<template>
<div>
这是商品列表页面
<span>{{ $route.params.goodsId }}</span></br>
<span>{{ $route.params.name }}</span>
</div>
</template>
<script>
export default {
data(){
return{
msg: ''
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)