vue-router
文章目录
示例代码
src2(传入升序asc或者降序desc进行排序)
<template>
<div class="home">
<h2>商品列表</h2>
<select v-model="sort">
<option value="desc">从高到低</option>
<option value="asc">从低到高</option>
</select>
<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: [],
sort: 'desc'
}
},
filters: {
RMB
},
watch: {
sort() {//监听数据sort,当sort发生变化时,调用方法getItems()发起请求
this.getItems();
}
},
async created() {
this.getItems();
},
methods: {
async getItems() {
let rs = await axios({
url: 'http://localhost:8081/api/items',
params: {
sort: this.sort
}
});
this.items = rs.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>
但是注意!使用watch监听可以,但是不能使用计算属性,因为计算属性不能处理异步!!
src3(新增需求使得分享url的时候可以保存排序状态)
<template>
<div class="home">
<h2>商品列表</h2>
<select :value="sort" @change="goto">
<!-- 将v-model改成v-bind也可以,绑定@change事件 -->
<option value="desc">从高到低</option>
<option value="asc">从低到高</option>
</select>
<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: [],
sort: 'desc'
}
},
filters: {
RMB
},
async created() {
this.getItems();
},
watch: {
$route(to, from) {
// console.log('路由变化了', to, from);
this.getItems();
}
},
methods: {
async getItems() {
this.sort = this.$route.query.s || 'desc';
let rs = await axios({
url: 'http://localhost:8081/api/items',
params: {
sort: this.sort
}
});
this.items = rs.data;
},
goto({target}) {
// console.log(target.value);
// 当url切换(路由切换)的时候,如果使用的同一个组件,就会复用该组件(不会销毁)
this.$router.push({
name: 'Home',
query: {
s: target.value
}
});
}
}
}
</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>
queryString
有的时候,我们可能也会用到 queryString
<select v-model="sort">
<option value="desc">从高到低</option>
<option value="asc">从低到高</option>
</select>
$route.query
我们可以通过路由对象 $route 的 query 属性来获取 queryString
...
computed: {
sort: {
get() {
return this.$route.query.sort || 'desc';
}
}
}
...
加上||'desc’是为了防止传入undefined,使默认desc
编程式导航
有的时候,我们可能需要用到编程的方式来导航(跳转),而不是点击链接。如:当 sort
发生改变的时候跳转
...
computed: {
sort: {
get() {
return this.$route.query.sort || 'desc';
},
set(newVal) {
this.$router.push({
name: 'home',
query: {
sort: newVal
}
});
}
}
}
...
路由组件的复用
为了提高性能,增强路由组件的复用,当路由切换使用的是同一个组件的时候,则会复用该路由组件,而不是销毁重建,这个时候,我们就需要通过 watch 或者 路由相关的生命周期函数来处理切换路由导致的变化
watch
如果切换的路由复用了组件,这个时候,我们可以使用 watch 监听 $route
watch: {
$route(to, from) {
console.log('$route');
}
}
- to : 改变之后的 $route 对象
- from : 改变之前的 $route 对象
但是我们可以使用 vue-router 提供路由守卫 (路由有关的生命周期函数)来处理路由有关的业务逻辑