Vue系列---【Vue开发笔记】
1.创建项目
2.清空工作
1.删除了src/assets、components、views
2.重置App.vue
<template>
<div>123</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2.重置router/index.js
//4.x以上的版本是为vue3用的
npm install vue-router@3.5.3
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes
})
export default router
3.项目搭建
1.reset.css
1.assets/css下创建reset.css文件
2.main.js引入
// 1.引入reset.css
import "./assets/css/reset.css"
2.rem.js
1.assets/js下创建rem.js
2.main.js引入
// 2.rem.js
import "./assets/js/rem"
px to rem
1.安装插件 px to rem ,默认换算是16
2.编辑器左下角—》设置图标—》settings(设置)—》搜索框：px to rem —>看到16，改成100
3.alt+z 实现px转rem rem转px
3.目录划分
-src
-assets 静态资源
-css
-js
-img
-components 公共组件
-filters 过滤器
-pages 路由组件
-home home页面
home.vue路由组件
-components 拼接home的组件们
banner.vue
list.vue
-request 请求
-router 路由
index.js 路由
App.vue 根组件
main.js 入口文件
4.一级路由
1.创建一堆相关组件
login 登录
index 大首页
movie 电影
movieDetail 电影详情
food 外卖
foodDetail 外卖详情
2.配置规则[src/router/index.js]
// 引入相关组件
import login from "../pages/login/login.vue"
import index from "../pages/index/index.vue"
import movie from "../pages/movie/movie.vue"
import movieDetail from "../pages/movieDetail/movieDetail.vue"
import food from "../pages/food/food.vue"
import foodDetail from "../pages/foodDetail/foodDetail.vue"
const routes = [
{
path:"/login",
component:login
},
{
path:"/index",
component:index
},
{
path:"/movie",
component:movie
},
{
path:"/movieDetail",
component:movieDetail
},
{
path:"/food",
name:food,
component:()=>import('../components/food.vue')
},
{
path:"/foodDetail",
component:foodDetail
},
{
path:"*",
redirect: "/login"
}
]
3.路由出口 [ src/App.vue]
<!-- 路由出口 -->
<router-view></router-view>
5.路由跳转|路由导航
1.router-link直接跳转
<router-link to="/index">前往大首页</router-link>
2.编程式导航
this.$router.push(path) //添加了一条新的历史记录
this.$router.replace(path) //用新的记录替换当前历史记录
this.$router.go(-1) //返回
6.二级路由
1.pages创建相关组件
home 首页
cate 分类
shop 购物车
mine 我的
2.路由出口 [ src/pages/index/index.vue]
<div>
<!-- 变化区域 -->
<router-view></router-view>
</div>
3.二级路由规则 [ router/index.js]
{
path: "/index",
component: index,
// 二级路由规则，path不加"/"
children: [
{
path: "home",
component: home
},
{
path: "cate",
component: cate
},
{
path: "shop",
component: shop
},
{
path: "mine",
component: mine
},
// 二级重定向
{
path:"",
redirect: "home"
}
]
},
4.底部导航高亮效果1 router-link-active
.footer .router-link-active{
color: blue;
}
5.路由导航高亮2 active-class
<!-- 底部导航 -->
<div class="footer">
<router-link to="/index/home" active-class="select">首页</router-link>
<router-link to="/index/cate" active-class="select">分类</router-link>
<router-link to="/index/shop" active-class="select">购物车</router-link>
<router-link to="/index/mine" active-class="select">我的</router-link>
</div>
.footer .select{
color: blue;
}
7.home.vue 路由导航
<template>
<div>
<h3>首页</h3>
<div class="box">
<h3>router-link</h3>
<!-- router-link 直接跳，没有条件 -->
<router-link to="/movie">电影</router-link>
<router-link to="/food">外卖</router-link>
</div>
<div class="box">
<h3>push：添加了一条新的历史记录</h3>
<button @click="toMovie">电影</button>
<button @click="toFood">外卖</button>
</div>
<div class="box">
<h3>replace：用新的记录替换当前历史记录</h3>
<button @click="toMovie2">电影</button>
<button @click="toFood2">外卖</button>
</div>
</div>
</template>
<script>
export default {
methods:{
toMovie(){
this.$router.push("/movie")
},
toFood(){
this.$router.push("/food")
},
toMovie2(){
this.$router.replace("/movie")
},
toFood2(){
this.$router.replace("/food")
}
}
}
</script>
8.movie.vue 返回
<template>
<div>
<h3>movie</h3>
<button @click="goback">返回</button>
</div>
</template>
<script>
export default {
methods:{
goback(){
this.$router.go(-1)
}
}
}
9.封装了公共组件
1.src/components中创建了公共组件goBack和toSearch
2.src/components中创建index.js
import goBack from "./goBack.vue"
import toSearch from "./toSearch.vue"
let myComponent={
goBack:goBack,
toSearch,
}
for(let key in myComponent){
Vue.component(key,myComponent[key])
}
3.main.js引入
// 引入全局组件
import "./components"
10.封装了过滤器
1.src/filters中创建过滤器filterPrice filterTime
2.src/filters/index.js
import Vue from "vue"
import filterPrice from "./filterPrice"
import filterTime from "./filterTime"
import filterTel from "./filterTel"
let filters={
filterPrice,
filterTime,
filterTel
}
for(let key in filters){
Vue.filter(key,filters[key])
}
3.main.js引入
// 引入过滤器
import "./filters"
11.动画
1.下载animate.css
npm i animate.css --save
2.main.js引入
// 引入animate.css
import "animate.css"
3.使用
<transition
enter-active-class="animate__animated animate__bounceInLeft"
>
<router-view></router-view>
</transition>
12.字体图标
1.下载字体图标
2.将iconfont.css放入静态资源assets中
3.main.js引入
import "./assets/css/iconfont.css"
4.使用
<template>
<i @click="$router.go(-1)" class="iconfont icon-back_icon"></i>
</template>
路由高阶
13.路由传参 (? search传参) 电影
1.movie.vue 进行传参
<ul>
<li is="router-link" :to="'/movieDetail?a=1&b=2&c=3&id='+item.id" v-for="item in list" :key="item.id" >
<h3>{{item.name}}</h3>
<div>时间：{{item.time|filterTime}}</div>
<div>价格:{{item.price|filterPrice}}</div>
</li>
</ul>
2.movieDetail.vue进行接收
mounted(){
// $router 路由对象，用来实现路由导航
// $route 路由信息，用来获取路径内容
console.log(this.$route.query.id);
//ajax
}
14.动态路由传参 [外卖]
1.food.vue绑定事件
<ul>
<li v-for="item in list" :key="item.id" @click="toDetail(item.id,item.name)">
<h3>{{item.name}}</h3>
<div>price:{{item.price|filterPrice}}</div>
</li>
</ul>
2.food.vue跳转
methods:{
toDetail(id,name){
// 动态路由
this.$router.push("/foodDetail/"+id+"/"+name)
}
}
3.修改路由规则 [src/router/index.js]
{
path: "/foodDetail/:id/:name",
component: foodDetail
},
4.foodDetail.vue接收参数
export default {
mounted(){
console.log(this.$route.params.id);
//ajax
}
}
15.命名路由
1.src/router/index.js
{
path: "/login",
component: login,
// 命名路由
name:"login"
},
{
path: "/search",
component: search,
name:"搜索页面"
},
<router-link :to="{name:'搜索页面'}" class="iconfont icon-sousuo"></router-link>
16.元信息 meta
home、cate、shop、mine都需要一个头部，但是内容不一样，可以使用元信息实现。[src/router/index.js]
children: [
{
path: "home",
component: home,
// 元信息
meta:{
title:"首页",
}
},
{
path: "cate",
component: cate,
meta:{
title:"分类"
}
},
{
path: "shop",
component: shop,
meta:{
title:"购物车"
}
},
{
path: "mine",
component: mine,
meta:{
title:"个人中心"
}
},
// 二级重定向
{
path:"",
redirect: "home"
}
]
Index.vue使用
<div class="header">{{$route.meta.title}}</div>
17.懒加载
let index = () => import("../pages/index/index.vue")
let movie = () => import("../pages/movie/movie.vue")
let movieDetail=()=>Promise.resolve(import("../pages/movieDetail/movieDetail.vue"))
let food=()=>Promise.resolve(import("../pages/food/food.vue"))
18.命名视图-了解
1.app.vue 写了2个出口
<div>
<router-view name="view1"></router-view>
<!-- 路由出口 没有name就是默认路由出口-->
<router-view></router-view>
</div>
2.src/router/index.js
{
path: "/login",
components:{
default:()=>import("../pages/login/login.vue"),
view1:()=>import("../components/ceshi.vue")
},
},
19.模式
设置模式mode [src/routr/index.js]
const router = new VueRouter({
//路由规则
routes,
// mode默认是hash
//history 不带# ,hash是带#
mode:"history"
})
打包命令：
npm run build
hash和history的区别
开发环境下(8080)，hash和history没有区别
生产环境:
hash
1.前进 后退 刷新ok
"http://localhost:3000/#/login" "#/login"是hash值，hash的改变不会影响请求
2.采用的是window.onhashchange=()=>{}实现的
history
1.前进 后退ok 刷新（404，数据）
一旦刷新，那么就走了后端路由，如果后端有这个路由，直接数据展示，如果后端没有该路由，404
2.采用HTML5新增的interface 里面的pushState() replaceState()
3.工作的时候如果要用history，需要后端配合
20.后端开启方法 [代码/backstage]
cmd执行
npm i
npm start //localhost:3000
将打包后的前端代码放入www目录即可。
21.三层
设置了保卫人员，必须保卫人员同意了才能执行。
保安： 进 保卫的是：整个小区
前台：进 保卫的是：公司 出
秘书：进 保卫的是：老板 出
22.登录拦截- 全局守卫
需求：如果登陆了，才可以访问所有的路由，否则，只能访问登录。
1.login.vue设计一个标识，用来判断是否登录
login(){
if(this.name=="admin"&&this.pass=="123"){
//设计一个标识，用来后面判断是否登录 islogin=true
localStorage.setItem("islogin",true)
this.$router.push("/index/home")
}else{
alert("账号密码错误")
}
}
2.router/index.js 设置全局前置守卫，判断
// to:前往的$route
// from:从哪里来的$route
router.beforeEach((to,from,next)=>{
// 1.取出来islogin
let islogin=localStorage.getItem("islogin");//'true' null
// 2.如果去的是登录路由，直接进
if(to.path==="/login"){
next();
return ;
}
// 3.如果去的不是登录，判断islogin,真就进，否则，去登录
if(islogin){
next();
return;
}
next("/login")
})
23.路由独享守卫
需求：只有外卖小哥可以访问外卖一条线，只有用户可以访问电影一条线
1.router/index.js添加路由独享守卫
{
path: "/food",
component: food,
//路由独享守卫:守卫当前路由 path
beforeEnter(to, from, next) {
console.log("路由独享守卫");
// 如果是外卖小哥 type=1 ,就进入，如果不是，去个人中心
let type = localStorage.getItem("type");
if (type == "1") {
next()
} else {
next("/index/mine")
}
}
},
{
path: "/foodDetail/:id/:name",
component: foodDetail,
beforeEnter(to, from, next) {
let type = localStorage.getItem("type");
if (type == "1") {
next()
} else {
next("/index/mine")
}
}
},
2.home.vue
data(){
return {
type:localStorage.getItem("type")
}
},
<div class="box">
<h3>router-link</h3>
<!-- router-link 直接跳，没有条件 -->
<router-link to="/movie" v-if="type=='2'">电影</router-link>
<router-link to="/food" v-else>外卖</router-link>
</div>
<div class="box">
<h3>push：添加了一条新的历史记录</h3>
<button @click="toMovie" v-if="type=='2'">电影</button>
<button @click="toFood" v-else>外卖</button>
</div>
<div class="box">
<h3>replace：用新的记录替换当前历史记录</h3>
<button @click="toMovie2" v-if="type=='2'">电影</button>
<button @click="toFood2" v-else>外卖</button>
</div>
23.组件内部守卫[movie.vue]
需求：去电影页面，只要从首页过来才可以访问，否则不给访问
beforeCreate(){
console.log("创建之前")
},
//组件内部守卫
//组件进来之前:守卫的是组件让不让访问
// 这个钩子函数，比beforeCreate还要早，所以里面不能使用this,如果需要使用路由信息，那么使用to代替
beforeRouteEnter(to, from, next) {
console.log("进来之前")
console.log(this);
if (from.path == "/index/home"||from.path=="/movieDetail") {
next();
} else {
next("/login");
}
},
24.电影详情跳转电影详情[movieDetail.vue]
// 从movieDetail-->movieDetail ,参数换了，mounted不再触发
beforeRouteUpdate(to, from, next) {
console.log("路由更新之前");
console.log(to.query.id);
//ajax
next();
},
25.组件离开[movie.vue]
//离开之前:没有next，组件就不离开了
beforeRouteLeave(to, from, next) {
next()
},
26.守卫流程
router.beforeEach()[所有的path]-->beforeEnter() [path]-->beforeRouteEnter() [component]--->aterEach()-->8个生命周期
27.路由导航守卫
全局守卫
router.beforeEach((to,from,next)=>{}) //所有路由进来之前 登录拦截
router.afterEach((to,from)=>{}) //所有路由进来之后
路由独享守卫
beforeEnter(to,from,next){} //守卫path
组件内部守卫
beforeRouteEnter(to,from,next){} //路由进来之前 无this
beforeRouteUpdate(to,from,next){} //路由更新之前
beforeRouteLeave(to,from,next){} //路由离开之前
28滚动行为
const router = new VueRouter({
routes,
mode: "history",
//滚动处理
scrollBehavior(to,from,savePosition){
console.group("====滚动行为===")
console.log(savePosition);//{x:0,y:375}
console.groupEnd()
//如果保存了位置，就返回保存的地方；否则，返回到(0，0)
if(savePosition){
return savePosition
}else{
return {x:0,y:0 }
}
}
})
29vue.config.js配置文件
module.exports={
devServer:{
port:8080,
host:'localhost',
open:true
}
}
愿你走出半生，归来仍是少年！
