zhi() {
window.scrollTo(0, 0);
// window.scrollTo(0, 0);
// document.documentElement.scrollTop = 0;
},
跨域
//方式一
//在項目的根目錄下建立一個vue.config.js檔案寫入：
module.exports = {
devServer: {
proxy: ‘https://m.douyu.com/api/’
},
}
注意重新開機項目！！！！！！！
//在頁面中請求時，把參數拼接上
this. a x i o s . g e t ( ′ 參 數 地 址 ′ ) / / axios.get('參數位址') // axios.get(′參數位址′)//axios要和挂載在原型上的$axios對應
//方式二
module.exports = {
publicPath: ‘./’,
devServer: {
open: true,
proxy: {
‘/api’: {
target: ‘http://47.115.85.237:3000/’, // 線上後端位址
changeOrigin: true, //允許跨域
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
}
filter是過濾
includes是包含搜尋
silce是截取
map是循環
import axios from “axios”;
Vue.prototype.$axios=axios;
shoplist userinfo userlist
import Vant from ‘vant’;
import ‘vant/lib/index.css’;
Vue.use(Vant);
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
import http from “./http/http.js”;
Vue.prototype.$http=http;
beforeRouteEnter(to, from, next) {
if (localStorage.getItem(“token”)) {
next();
} else {
next("/login");
}
},
全局守衛
router.beforeEach((to, from, next)=>{
if (localStorage.getItem(“token”)) {
next();
} else {
if(to.path !="/tome"){
next()
}else{
next("/login")
}
}
})
vuex
beforeRouteEnter(to, from, next) {
next(vm => {
if (vm.$store.state.user) {
next()
} else {
alert(“你還沒登入”)
next("/login")
}
})
},
token失效
function removeToken() {
setTimeout(() => {
store.commit(“tui”)
}, 2000);
}
Vue.prototype.removeToken = removeToken;
this.removeToken()
vuex
cnpm i vuex-persist -S
import persist from “vuex-persist”;
plugins: [
new persist({
storage: window.localStorage,
}).plugin,
],
import Vue from “vue”;
import Vuex from “vuex”;
Vue.use(Vuex);
export default new Vuex.Store({
state: {
shoplist: [],
},
mutations: {
add(state, item) {
console.log(item);
let flag = false;
state.shoplist.forEach((i) => {
if (i.id == item.id) {
item.num++;
flag = true;
}
});
if (flag == false) {
item.num = 1;
state.shoplist.push(item);
}
},
jia(state, obj) {
console.log(obj);
state.shoplist.forEach((item) => {
if (item.id == obj.id) {
item.num == obj.num;
}
});
},
del(state, id) {
state.shoplist.forEach((item, index) => {
if (item.id == id) {
state.shoplist.splice(index, 1);
}
});
},
},
actions: {},
modules: {},
});
動畫轉場
cnpm i animate.css --save
import ‘animate.css’
.slide-enter {
transform: translate(100%);
}
.slide-leave-to {
transform: translate(-100%);
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s linear;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
}
.page{
position: absolute;
width: 100%;
height: calc(100% -96px);
left: 0;
// overflow: auto;
}
動态路由：
console.log(val);
this. r o u t e r . p u s h ( p a t h : " / / " + v a l ) t h i s . router.push({path:"//"+val}) this. router.push(path:"//"+val)this.axios.get("/data.json").then((res) => {
res.data.data.filter((item) => {
if (item.id == val) {
this.cate = item.children;
}
});
});
},
路由裡面
{
path: ‘//:id’,
name: ‘Home’,
component: Home
},
app裡面
首頁
登入
登陸頁面
};
up(){
this.cate.sort((a,b)=>{
return a.price-b.price
})
},
down(){
this.cate.sort((a,b)=>{
return b.price-a.price
})
},
排序
<van-search v-model=“value” placeholder=“請輸入搜尋關鍵詞” @search=“opp” />
opp() {
this.list.forEach((item) => {
if (item.title.includes(this.value)) {
this.active = item._id;
this.change(this.active);
}
});
},