關(guān)于VueRouter導(dǎo)入的全過程

更新時(shí)間：2022年08月11日 11:09:24 作者：withkai44

這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

router

nanoid的使用

? --生成隨機(jī)id

引入

yarn add nanoid

使用

import {nanoid} from 'nanoid'
var id = nanoid()

路由

1-1 安裝依賴

yarn add vue-router

1-2 引入

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Movie from '../pages/Movie/index.vue'
import Music from '../pages/Music/index.vue'
const routes = [
  {
    path:"/music",
    component:Music
  },
  {
    path:"/movie",
    component:Movie
  }
]
const router = new VueRouter({
  routes,
  mode:"history"
})
export default router;

1-3 在main.js中使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
? router,
? render: h => h(App),
}).$mount('#app')

1-4 App.vue

<template>
? <div>
? ? <router-view></router-view>
? </div>
</template>

全局過濾器

在main.js中掛載在Vue原型上

Vue.filter("handleStr",function(val){
? if(val.length > 3){
? ? val = val.slice(0,3) + '...'
? }
? return val
})

element-ui

安裝依賴

yarn add element-ui

main.js

....
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
...

全局組件

import Loading from '../components/Loading.vue'
Vue.component("Loading",Loading)

Vuc-cli中的視配

只在手機(jī)端

lib-flexible 阿里

1-1 安裝依賴

yarn add lib-flexible postcss-pxtorem@5.1.1

1-2 配置文件

新建postcss.config.js

module.exports = {
? plugins: {
? ? 'postcss-pxtorem': {
? ? ? rootValue: 75,
? ? ? propList: ['*'],
? ? },
? },
};

1-3 main.js

導(dǎo)入lib-flexible

import 'lib-flexible/flexible.js'

1-4 public/index.html

將此行注釋，關(guān)閉視口

<meta name="viewport" content="width=device-width,initial-scale=1.0">

1-5 在pc端視配

<template>
? <div id="app">
? ? ...
? </div>
</template>

<script>
?? ?...
</script>

<style>
*{
? margin: 0;
? padding: 0;
}
#app{
? width: 10rem;
? margin: 0 auto;
? background-color: red;
}
</style>

slot封裝動(dòng)畫

// #1 定義一個(gè)組件
<template>
? <transition>
? ? <slot name="fade"></slot>
? </transition>
</template>

<script>
export default {
}
</script>

<style>
.v-enter,.v-leave-to{
? opacity: 0;
}
.v-enter-active,.v-leave-active{
? transition: opacity 4s;
}
</style>

// #2 使用
<template>
? <div class="about">
? ? <Fade>
? ? ? <h1 slot="fade" v-show="isShow">This is an about page</h1>
? ? </Fade>
? </div>
</template>

<script>
import Fade from '../components/Fade.vue'
export default {
? data() {
? ? return {
? ? ? isShow:true
? ? }
? },
? components:{
? ? Fade
? }
}
</script>

項(xiàng)目初始化

1、rem
2、asssreset.css

1-1 .router-link-active

被選中的路由樣式

.router-link-active{
? ? color: #ff2d51;
? }

1-2 動(dòng)態(tài)顯示tabbar

? – 在路由配置中增加一條meta屬性

const routes = [
? {
? ? path: '/films',
? ? name: 'Films',
? ? component:Films,
? ? meta:{
? ? ? isNav:true
? ? }
? },
? {
? ? path: '/article',
? ? name: 'Article',
? ? component:Article,
? ? meta:{
? ? ? isNav:true
? ? }
? },
? {
? ? path: '/center',
? ? name: 'Center',
? ? component:Center,
? ? meta:{
? ? ? isNav:true
? ? }
? },
? {
? ? path:"/movie/:id",
? ? name:'MovieDetail',
? ? component:MovieDetail
? }
]

通過v-if動(dòng)態(tài)顯示

<tab-bar v-if="this.$route.meta.isNav"></tab-bar>

1-3 跳轉(zhuǎn)回前一個(gè)頁(yè)面

this.$router.back()

1-4輪播

yarn add vue-preview

import VuePreview from 'vue-preview'
Vue.use(VuePreview)

vant ui的按需導(dǎo)入

1-1 安裝依賴

yarn add vant babel-plugin-import

1-2 配置babel.config.js

module.exports = {
? presets: [
? ? '@vue/cli-plugin-babel/preset'
? ],
? plugins: [
? ? ["import", {
? ? ? "libraryName": "vant",
? ? ? "libraryDirectory": "es",
? ? ? "style": true
? ? }]
? ]
}

1-3 配置main.js

import {Button} from 'vant'
Vue.use(Button)

router-view實(shí)現(xiàn)動(dòng)畫

<template>
? <div>
? ? <div class="cover" v-if="isShow"></div>
? ? <transition?
? ? ? @before-enter="handleBeforeEnter"
? ? ? @enter="handleEnter"
? ? >
? ? ? <slot></slot>
? ? </transition>
? </div>
</template>

<script>
/*?
.v-enter ? ? ? ? ? ? ?@before-enter
.v-ernter-active ? ? ?@enter
.v-enter-to ? ? ? ? ? @after-enter
*/
? export default {
? ? data() {
? ? ? return {
? ? ? ? isShow:false
? ? ? }
? ? },
? ? methods:{
? ? ? handleBeforeEnter(){
? ? ? ? this.isShow = true
? ? ? },
? ? ? handleEnter(){
? ? ? ? setTimeout(() => {
? ? ? ? ? this.isShow = false
? ? ? ? }, 200);
? ? ? }
? ? }
? }
</script>

<style>
? .v-enter-active{
? ? animation: animate 2s linear;
? }
? @keyframes animate {
? ? 0%{
? ? ? opacity: 0;
? ? ? transform: translateY(0px);
? ? }
? ? 50%{
? ? ? opacity: .5;
? ? ? transform: translateY(20px);
? ? }
? ? 100%{
? ? ? opacity: 1;
? ? ? transform: translateY(0px);
? ? }
? }
? .cover{
? ? width: 100%;
? ? height: 100%;
? ? background-color: #fff;
? ? position: fixed;
? ? z-index: 10;
? }
</style>

嵌套路由

1-1 router.js

?{
? ? path: '/films',
? ? name: 'Films',
? ? component:Films,
? ? meta:{
? ? ? isNav:true
? ? },
? ? children:[
? ? ? {
? ? ? ? path:"nowPlaying",
? ? ? ? component:NowPlaying
? ? ? }
? ? ]
? },

1-2 index.vue

需要加入router-view

<template>
?? ?...
? ? <div class="container">
? ? ? ? <!-- 裝載父路由下的子路由的對(duì)應(yīng) -->
? ? ? ? <router-view></router-view>
? ? </div>
</template>

異步路由?

--又稱路由懶加載

{
? ? path: '/about',
? ? name: 'About',
? ? // 異步路由
? ? component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},

怎么減少首屏渲染時(shí)間

1、使用異步路由

頁(yè)面跳轉(zhuǎn)和生命周期

? --面試常客

頁(yè)面跳轉(zhuǎn)

1-1 A頁(yè)面初次加載

beforeCreate(){
?? ?console.log('beforeCreate');
},
created(){
?? ?console.log('created');
},
beforeMount(){
?? ?console.log('beforeMount');
},
mounted(){
?? ?console.log('mounted');
},

1-2 A->B

從A頁(yè)面跳轉(zhuǎn)到B頁(yè)面

A頁(yè)面觸發(fā)以下生命周期

beforeDestroy(){
?? ?console.log('beforeDestroy');
},
destroyed(){
?? ?console.log('destroyed');
}

1-3 B–>A

從B頁(yè)面回到A頁(yè)面

A頁(yè)面觸發(fā)以下生命周期

beforeCreate(){
?? ?console.log('beforeCreate');
},
created(){
?? ?console.log('created');
},
beforeMount(){
?? ?console.log('beforeMount');
},
mounted(){
?? ?console.log('mounted');
},

upDate

beforeUpdate , beforeUpdate執(zhí)行需要滿足以下兩個(gè)條件

1、data中的數(shù)據(jù)更新的時(shí)候

2、模板中要使用data中的數(shù)據(jù)

destroyed

# A頁(yè)面 --> b頁(yè)面

b頁(yè)面執(zhí)行以下生命周期：

1.beforeCreate B
2.created B
3.beforeMount B
4.beforeDestroy A
5.destroyed A
6.mounted B

DOM和生命周期

只能在mounted生命周期中獲取DOM

緩存的進(jìn)一步封裝

localStorage.setItem() 函數(shù)會(huì)將對(duì)象或者數(shù)組全部轉(zhuǎn)換成字符串的形式

所以可以對(duì)緩存進(jìn)行判斷，使用 JSON.stringify 和 JSON.parse 分別處理數(shù)據(jù)

const setLocalStorage = (key , value) => {
? if(value instanceof Array || value instanceof Object){
? ? value = JSON.stringify(value)
? }
? localStorage.setItem(key , value)
}
const getLocalStorage = (key) =>{
? var val = localStorage.getItem(key)
? var reg = /^[[{].*[\]}]/
? if(reg.test(val)){
? ? val = JSON.parse(val)
? }
? return val
}

axios

跨域

安裝依賴

yarn add axios-jsonp

axios格式

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'
axios({
? ? url:"",
? ? adapter: jsonpAdapter,
}).then(
?? ?res => console.log(res)
)

騰訊地圖api需要在最后加上 &output=jsonp

https://apis.map.qq.com/ws/location/v1/ip?key=L6UBZ-JSLCU-FRAVA-4DBQG-V5WC5-2RBJ4&output=jsonp

地址值的放置

http://47.108.197.28:3000/top/playlist?limit=1&offset=1

在小程序中

wx.request({
})

axios中

import axios from 'axios'
axios({
?? ?url:"http://47.108.197.28:3000/top/playlist",
?? ?method:"get",
?? ?params:{
?? ?limit:1
?? ?}
}).then(res=>{
?? ?console.log(res)
})

Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
? state: {
? },
? mutations: {
? },
? actions: {
? },
? modules: {
? }
})

1、state

? --state中存放的是數(shù)據(jù)

state: {
? ? num:10
}

this.$store.state

2、mutation

? --mutation中的函數(shù)第一個(gè)默認(rèn)參數(shù)是state

? --連接方式 commit

mutations: {
? ? add(state){
? ? ? ? console.log(state);
? ? ? ? state.num++;
? ? }
},

this.$store.commit('add')

3、actions

? --actions中的函數(shù)第一個(gè)默認(rèn)值是上下文

? --連接方式 dispatch

actions: {
? ? addNum(ctx){
? ? ? ? console.log(ctx);
? ? ? ? ctx.commit("add")
? ? }
},

this.$store.dispatch('a')

keep-alive

使用keep-alive之后，路由切換的時(shí)候，生命周期函數(shù)不會(huì)重復(fù)的觸發(fā)
組件不會(huì)被銷毀，而是被緩存起來(lái)。當(dāng)加載到對(duì)應(yīng)的路由頁(yè)面，緩存的組件會(huì)被加載

路由組件的兩個(gè)生命周期函數(shù)

/* 路由組件被激活時(shí)觸發(fā)。 */
activated(){
?? ?console.log('activated')
}
/* 路由組件失活時(shí)觸發(fā)。 */
deactivated(){
?? ?console.log('deactivated')
}

路由守衛(wèi)

全局路由守衛(wèi)

router.beforeEach((to , from ,next)=>{
? console.log(to); ? ?// 要跳轉(zhuǎn)的路由
? console.log(from); ?// 起點(diǎn)路由
? next();
})

Login_guard(Vue&koa)

一、登錄頁(yè)面

<template>
? <div>
? ? <el-form
? ? ? :model="ruleForm"
? ? ? status-icon
? ? ? :rules="rules"
? ? ? ref="ruleForm"
? ? ? label-width="100px"
? ? ? class="demo-ruleForm"
? ? >
? ? <!-- props為了規(guī)則校驗(yàn) rules -->
? ? <el-form-item label="用戶名" prop="username">
? ? ? ? <el-input ?type="text" v-model.number="ruleForm.username"></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="密碼" prop="pass">
? ? ? ? <el-input
? ? ? ? ? type="password"
? ? ? ? ? v-model="ruleForm.pass"
? ? ? ? ? autocomplete="off"
? ? ? ? ></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="確認(rèn)密碼" prop="checkPass">
? ? ? ? <el-input
? ? ? ? ? type="password"
? ? ? ? ? v-model="ruleForm.checkPass"
? ? ? ? ? autocomplete="off"
? ? ? ? ></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item>
? ? ? ? <el-button type="primary" @click="submitForm('ruleForm')"
? ? ? ? ? >提交</el-button
? ? ? ? >
? ? ? ? <el-button @click="resetForm('ruleForm')">重置</el-button>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>
<script>
export default {
? // beforeRouteEnter () {
? // ? /* 在局部守衛(wèi)中獲取不到this */
? // ? console.log(1);
? // },
? data() {
? ? var checkUsername = (rule, value, callback) => {
? ? ? if (!value) {
? ? ? ? return callback(new Error("用戶名不能為空"));
? ? ? }else{
? ? ? ? callback();
? ? ? }
? ? };
? ? var validatePass = (rule, value, callback) => {
? ? ? if (value === "") {
? ? ? ? callback(new Error("請(qǐng)輸入密碼"));
? ? ? } else {
? ? ? ? if (this.ruleForm.checkPass !== "") {
? ? ? ? ? this.$refs.ruleForm.validateField("checkPass");
? ? ? ? }
? ? ? ? callback();
? ? ? }
? ? };
? ? var validatePass2 = (rule, value, callback) => {
? ? ? if (value === "") {
? ? ? ? callback(new Error("請(qǐng)?jiān)俅屋斎朊艽a"));
? ? ? } else if (value !== this.ruleForm.pass) {
? ? ? ? callback(new Error("兩次輸入密碼不一致!"));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? };
? ? return {
? ? ? ruleForm: {
? ? ? ? pass: "",
? ? ? ? checkPass: "",
? ? ? ? username: "",
? ? ? },
? ? ? rules: {
? ? ? ? pass: [{ validator: validatePass, trigger: "blur" }],
? ? ? ? checkPass: [{ validator: validatePass2, trigger: "blur" }],
? ? ? ? username: [{ validator: checkUsername, trigger: "blur" }],
? ? ? },
? ? };
? },
? methods: {
? ? submitForm(formName) {
? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? if (valid) {
? ? ? ? ? // alert("submit!");
? ? ? ? ? // console.log(this.ruleForm);
? ? ? ? ? // console.log(username,pass);
? ? ? ? ? /* 發(fā)送http請(qǐng)求 */
? ? ? ? ? this.loginHttp()
? ? ? ? } else {
? ? ? ? ? console.log("error submit!!");
? ? ? ? ? return false;
? ? ? ? }
? ? ? });
? ? },
? ? resetForm(formName) {
? ? ? this.$refs[formName].resetFields();
? ? },
? ? loginHttp(){
? ? ? var {username , pass} = this.ruleForm
? ? ? this.$http({
? ? ? ? method: 'post',
? ? ? ? url:'http://localhost:8000/login',
? ? ? ? data:{
? ? ? ? ? username,
? ? ? ? ? pass
? ? ? ? }
? ? ? }).then(res=>{
? ? ? ? console.log(res.data);
? ? ? ? if(res.data.code == 200){
? ? ? ? ? this.$message({
? ? ? ? ? ? message:res.data.msg,
? ? ? ? ? ? type:"success",
? ? ? ? ? ? duration:1000
? ? ? ? ? })
? ? ? ? ? this.$router.push('/home')
? ? ? ? }else{
? ? ? ? ? this.$message({
? ? ? ? ? ? message:res.data.msg,
? ? ? ? ? ? type:"warning",
? ? ? ? ? ? duration:1000
? ? ? ? ? })
? ? ? ? }
? ? ? })
? ? }
? }
?
};
</script>

二、后臺(tái)代碼

const koa = require("koa");
const app = ?new koa();
const koaBody = require("koa-body");
const router = require("koa-router")();
const cors = require("koa2-cors");
?
? ? /* username=cheng ?pass=123456 */
? ? console.log(ctx.request.body);
? ? var {username , pass } = ctx.request.body
? ? if(username == "cheng" && pass == "123456"){
? ? ? ctx.cookies.set("loginAuth",true,{
? ? ? ? /* httpOnly:false ? 設(shè)置前端可讀 */
? ? ? ? httpOnly:false
? ? ? })
? ? ? ctx.body = {
? ? ? ? code:200,
? ? ? ? msg:"登錄成功"
? ? ? }
? ? }else{
? ? ? ctx.body = {
? ? ? ? code:400,
? ? ? ? msg:"登錄失敗，用戶名或密碼錯(cuò)誤"
? ? ? }
? ? }
})
/* 后端配置cookie可以實(shí)現(xiàn)跨域訪問 */
app.use(cors({
? origin:ctx =>{
? ? return ctx.headers.origin
? },
? credentials:true
}));
app.use(koaBody());
app.use(router.routes());
app.listen(8000);

三、配置cookie跨域訪問

3-1 配置后端cookie可以訪問

/* 后端配置cookie可以實(shí)現(xiàn)跨域訪問 */
app.use(cors({
? origin:ctx =>{
? ? return ctx.headers.origin
? },
? credentials:true
}));

3-2 配置前端跨域訪問cookie

import axios from 'axios'
/* 設(shè)置前端跨域訪問cookie */
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true

3-3 vue上獲取cookie

安裝依賴

yarn add vue-cookie

配置main.js

import VueCookie from 'vue-cookie'
Vue.use(VueCookie)

在頁(yè)面中獲取cookie

mounted() {
? ? console.log(this.$cookie.get('loginAuth'));
}

3-4 路由守衛(wèi)

? --沒有登錄的情況下，不能進(jìn)入其它頁(yè)面

? --已經(jīng)登錄的情況下，直接進(jìn)入首頁(yè)

var vm = new Vue();
router.beforeEach((to,from,next)=>{
? console.log(vm.$cookie.get('loginAuth'));
? var isLogin = vm.$cookie.get('loginAuth')
? if(to.path == "/login"){
? ? /* 1、登錄頁(yè)面，如果cookie顯示登錄了直接進(jìn)入home頁(yè)面，如果沒有登錄，正產(chǎn)執(zhí)行l(wèi)ogin頁(yè)的邏輯 */
? ? if(isLogin){
? ? ? router.push('/home')
? ? }else{
? ? ? next()
? ? }
? }else{
? ? /* 2、在其他頁(yè)面，如果登錄正常顯示，沒有登錄則停留在login頁(yè)面 */
? ? if(isLogin){
? ? ? next()
? ? }else{
? ? ? router.push('/login')
? ? }
? }
})

懶加載

1、圖片懶加載

安裝依賴

yarn add vue-lazyload

在main.js中進(jìn)行配置

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
? preLoad:1.3,
? loading:require('@/assets/loading.gif')
})

使用（將:src替換成v-lazy）

<template>
? <div class="home">
? ? <div ?v-for="item of playlists" :key="item.id">
? ? ? <img ?class="item" v-lazy="item.coverImgUrl" alt="">
? ? ? <p>{{item.name}}</p>
? ? </div>
? </div>
</template>

2、axios攔截器

? --實(shí)現(xiàn)loading的加載效果

在vuex中定義一條isShowLoading --> 設(shè)置加載條是否顯示

export default new Vuex.Store({
? state: {
? ? isSowLoading:true
? },
})

main.js

// 配置 請(qǐng)求攔截 和 響應(yīng)攔截
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
? // 在發(fā)送請(qǐng)求之前做些什么
? store.state.isSowLoading = true
? return config;
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
? // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
? // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
? store.state.isSowLoading = false
? return response;
});

App.vue設(shè)置loading

<template>
? <div id="app">
? ? <Loading v-if="this.$store.state.isShowLoading"/>
? ? <router-view/>
? </div>
</template>

3、上拉刷新

vant-ui 中整合了小程序中的 onBottom 和 onLoad

<template>
? <div class="home">
? ? <van-list
? ? ? class="home"
? ? ? v-model="loading"
? ? ? :finished="finished"
? ? ? finished-text="沒有更多了"
? ? ? @load="onLoad"
? ? >
? ? ? <van-cell @click="handleClick(item.id)" v-for="item of playlists" :key="item.id">
? ? ? ? <img class="item" v-lazy="item.coverImgUrl" alt="">
? ? ? ? <p>{{item.name}}</p>
? ? ? </van-cell>
? ? </van-list>
? </div>
</template>

<script>
export default {
? name: 'Home',
? data() {
? ? return {
? ? ? playlists:[],
? ? ? loading:false,
? ? ? finished:false
? ? }
? },
? mounted() {
? ??
? },
? methods: {
? ? onLoad(){
? ? ? setTimeout(()=>{
? ? ? ? var offset = this.playlists.length
? ? ? ? console.log(1);
? ? ? ? this.axios.get(`http://47.108.197.28:3000/top/playlist?offset=${offset}&limit=20`).then(res =>{
? ? ? ? ? var playlists = this.playlists.concat(res.data.playlists)
? ? ? ? ? this.playlists = playlists
? ? ? ? ? this.loading = false
? ? ? ? })
? ? ? },500)
? ? },
? ? handleClick(id){
? ? ? this.$router.push(`detail?id=${id}`)
? ? }
? },
}
</script>

<style scoped>
? .item{
? ? width: 150px;
? ? height: 150px;
? }
? .home{
? ? display: flex;
? ? justify-content: space-between;
? ? flex-wrap: wrap;
? }
? .van-cell{
? ? width: 150px;
? }
? .home >>> .van-list__loading{
? ? position: fixed;
? ? bottom: 0;
? ? left: 50%;
? ? transform:translateX(-50%);
? }
</style>

4、路由滾動(dòng)記錄當(dāng)前滾動(dòng)條位置問題?

在路由設(shè)置中，重置滾動(dòng)條的x，y

const router = new VueRouter({
? ...
? scrollBehavior (to , from , savedPosition) {
? ? if( to.path == "/detail"){
? ? ? return {x:0,y:0}?? ?// 讓頁(yè)面出于頂部
? ? }else{
? ? ? return savedPosition?? ?// 讓頁(yè)面出于記錄點(diǎn)
? ? }
? }
})

Vue路由跳轉(zhuǎn)的bug

項(xiàng)目中遇到如下報(bào)錯(cuò)內(nèi)容：

Uncaught (in promise) Error: Redirected when going from “/XXX” to “/XXX” via a navigation guard.

原因：vue-路由版本更新產(chǎn)生的問題,導(dǎo)致路由跳轉(zhuǎn)失敗拋出該錯(cuò)誤，但并不影響程序功能

在main.js中改變push原型

import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
? if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
? return originalPush.call(this, location).catch(err => err)
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

關(guān)于VueRouter導(dǎo)入的全過程

目錄

router

nanoid的使用

引入

使用

路由

1-1 安裝依賴

1-2 引入

1-3 在main.js中使用

1-4 App.vue

全局過濾器

element-ui

全局組件

Vuc-cli中的視配

1-1 安裝依賴

1-2 配置文件

1-3 main.js

1-4 public/index.html

1-5 在pc端視配

slot封裝動(dòng)畫

項(xiàng)目初始化

1-1 .router-link-active

1-2 動(dòng)態(tài)顯示tabbar

1-3 跳轉(zhuǎn)回前一個(gè)頁(yè)面

1-4輪播

vant ui的按需導(dǎo)入

1-1 安裝依賴

1-2 配置babel.config.js

1-3 配置main.js

嵌套路由

1-1 router.js

1-2 index.vue

異步路由?

頁(yè)面跳轉(zhuǎn)和生命周期

頁(yè)面跳轉(zhuǎn)

DOM和生命周期

緩存的進(jìn)一步封裝

axios

跨域

地址值的放置

Vuex

1、state

2、mutation

3、actions

keep-alive

路由守衛(wèi)

Login_guard(Vue&koa)

一、登錄頁(yè)面

二、后臺(tái)代碼

三、配置cookie跨域訪問

懶加載

1、圖片懶加載

2、axios攔截器

3、上拉刷新

4、路由滾動(dòng)記錄當(dāng)前滾動(dòng)條位置問題?

Vue路由跳轉(zhuǎn)的bug

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2、mutation

一、登錄頁(yè)面

三、配置cookie跨域訪問

1、圖片懶加載

2、axios攔截器

3、上拉刷新