vue-router

文章目录

vue-router动态路由路由对象$router 对象$route 对象$route.params

动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url

/item/1 /item/2 /item/3 ...

我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

... { path: '/item/:itemId', name: 'item', component: Item } ...

其中 :itemId 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId

// home.vue <template> <div class="home"> <h2>商品列表</h2> <ul class="item-list"> <li class="head"> <span>名称</span> <span>价格</span> <span>操作</span> </li> <li v-for="item of items" :key="item.id"> <span> <router-link :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link> </span> <span>{{item.price|RMB}}</span> <span> <button>添加到购物车</button> </span> </li> </ul> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'home', data() { return { items: [] } }, filters: { RMB }, created() { axios({ url: '/api/items' }).then(res => { this.items = res.data; }); } } </script> <style> ul { margin: 0; padding: 0; } li { list-style: none; } .item-list li { padding: 10px; display: flex; justify-content: space-between; height: 30px; line-height: 30px; border-bottom: 1px dotted #333; } .item-list li.head { font-weight: bold; } .item-list li span { min-width: 200px; } </style>

路由对象

vue-router 会在组件中添加（注入）两个属性

$router$route

$router 对象

该对象其实就是 new VueRouter(…) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，比如：go、back、push 等

$route 对象

通过该对象可以访问与当前路由匹配的信息

$route.params

获取动态路由有关的信息

// item.vue <template> <div> <template v-if="item"> <h2>商品详情 - {{item.name}}</h2> <dt>ID</dt> <dd>{{item.id}}</dd> <dt>名称</dt> <dd>{{item.name}}</dd> <dt>价格</dt> <dd>{{item.price|RMB}}</dd> </template> <template v-else> <h2>没有该商品信息</h2> </template> </div> </template> <script> import axios from 'axios'; import {RMB} from '@/filters/RMB'; export default { name: 'item', data() { return { item: null } }, filters: { RMB }, created() { let itemId = Number(this.$route.params.itemId); if (itemId) { axios({ url: `/api/item/${itemId}` }).then(res => { this.item = res.data; }).catch(err=>{}); } } } </script>