Vue 路由

1）编程导航

push() 向历史记录添加一个记录，保存历史记录   router-link跳转就是push
replace()  目标页面地址把当前地址给替换掉，不保存历史记录
            支付、登录成功、注册成功
go(-1) 返回

经常在做判断的时候要用的。

  <button @click="$router.go(-1)">返回</button>
  <ul>
  <!-- 点击进入商品详情 -->
  <li @click="$router.push('/detail')">小米10</li>
  <li @click="$router.push('/detail')">华为电脑</li>
​
<!-- 2.  -->
<h4>2. replace 不保存记录</h4>
<li @click="$router.replace('/detail')">小米10</li>
<li @click="$router.replace('/detail')">华为电脑</li>
</ul>

2）封装全局过滤器

import Vue from 'vue'
​
import fomatetime from './fomatetime';
import priceToFixed from "./priceToFixed";
​
let filters = {
    fomatetime,
    priceToFixed
}
​
for(let key in filters){
    Vue.filter( key,filters[key] )
}
​
// Vue.filter( 'priceToFixed',priceToFixed )
// Vue.filter( 'fomatetime',fomatetime )

3）封装全局组件

3.1 先设计某一个公共组件文件

3.2 在comonents创建index.js

index.js
​
import Vue from 'vue'
​
import vHeader from './header/header.vue'
import vSearchBtn from './search/search.vue'
import vSwiper from './swiper/swiper.vue'
​
​
let coms = {
    vHeader,
    vSearchBtn,
    vSwiper
}
​
// Vue.component('vHeader',vHeader)
// Vue.component('vSearchBtn',vSearchBtn)
​
for(let key in coms){
    // 'vHeader',vHeader
    Vue.component(key,coms[key])
}

3.3 在main.js中引入即可

import './components/index.js'

4) 重置样式和rem.js

reset.css

rem.js : 默认扩展100倍

px to rem 插件（vscode插件）

5）字体图标

1. 从字体网站下载需求字体

2. 把以下4个文件拷贝到assets文件夹下

在main.js中引入 iconfont.css

6）assets/public

assets下的资源使用相对路径：图片、js、css ，可以用import引入

public下的资源使用 / 开头 ，就放图片、第三方的js、第三方css，但是不要用import引入

main.js 
//1. 重置样式
import './assets/reset.css'
​
//2. rem.js 就是在项目中单纯的执行下即可
import './assets/rem.js'

home.vue

<h2>assets下的资源: 相对路径</h2>
<img src="../../assets/images/erha1.jpg" class="img1" alt="">
<hr>
<img src="@/assets/images/erha1.jpg" class="img1" alt="">
​
<h2>public下的资源： / : 包含了public 绝对地址</h2>
<img src="/images/erha2.jpg" class="img1" alt="">

1.路由传参

this.$route： 当前页面的路由对象

this.$router: router/index.js 中的 new VueRouter() 出来的实例对象

示例：从首页跳转到列表页

?querystring 查询字符串参数
?key1=value1&key2=value2

  <div @click="$router.push('/list?type=小米&limit=10')">小米</div>
  <div @click="$router.push('/list?type=华为')">华为</div>
  <div @click="$router.push('/list?type=沙发')">沙发</div>
------------------------------------------------------------------------
接收页面用  
$route.query接收
this.$route.query接收

2.动态路由

示例：从首页点击某个商品进入到详情页为例

2.1 先修改 router/index.js的路由配置，如下。
{
  path:'/detail/:id/:type',
  component:detail
},

    首页的代码
<div class="item" @click="$router.push('/detail/10')">Redmi 红米A55 L55R6-A 55英寸4KHDR</div>
<div class="item" @click="$router.push('/detail/12')">HUAWEI nova 8 SE 4G全网通 8+128GB幻夜黑 6400万高清四摄 66W超级快充</div>


详情页接收
$route.params

3.命名路由 name

修改路由规则 
{
      path:'/list',
      component:list,
      name:'list11',//为路由起个名称
    },
    {
      path:'/detail/:id/:type',
      component:detail,
      name:'detail'
    },
     
 可以用name方式进行跳转
<div  class="item" @click="$router.push({ name:'list11' })">命名路由 小米</div>
<div class="item" @click="$router.push({ name:'detail',params:{ id:111,type:'小米' } })">跳转到详情页1</div>
      

4.命名视图-了解

router/index.js
{
      path: '/login',
      components: {
        default:login,
        aa:demo
      }
    }
    
app.vue
  <!-- router-view: 没有写name属性，代表默认出口|视图 -->
 <router-view></router-view>
<router-view name="aa"></router-view>

5.路由元信息 meta

修改router/index.js
为对应页面级的组件设置一些参数值。
我们之前的 
<v-header title="首页"></header>

首页、购物车、登录等可以使用 meta实现 。
	{
          path: 'shop',
          component: shop,
          meta:{
            title:'购物车',
            time:'2021-11-30'
          }
        },   //   /index/shop
	{
    path: 'cates',
    component: cates,
    meta:{
    title:'分类',
    time:'2021-11-30'
    }
}

列表页
<v-header :title="$route.query.type + '列表'">

6.懒加载-优化项目的

修改router/index.js文件 ，组件的引入方式 。
let cates = ()=> import('../views/cates/cates.vue')

let home = ()=> Promise.resolve( import('../views/home/home.vue') )   //了解

7.路由模式 ：面试会问

mode:
	history ： PC端可能会用，移动端没有必要使用此模式
    hash ：

hash和history的区别

 开发环境下(8080)，hash和history没有区别
 生产环境:指的就是上线

    hash 
      1.前进 后退 刷新ok(  开发阶段和线上都没有问题  )
      "http://localhost:3000/#/login"  "#/login"是hash值，hash的改变不会影响请求
      2.采用的是window.οnhashchange=()=>{}实现的

    history 
      1.前进 后退ok 刷新（404，数据）
      一旦刷新，那么就走了后端路由，如果后端有这个路由，直接数据展示，如果后端没有该路由，404
      2.采用HTML5新增的interface 里面的pushState() replaceState()
      3.工作的时候如果要用history，需要后端配合

8.导航守卫

全局守卫： 大门口的保安
	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){} //路由离开之前  : 了解

1. 全局守卫

2.路由独享守卫：各个楼（每一个公司：前台）

3.组件守卫

• beforeRouteEnter 进来之前

• beforeRouteUpdate 路由更新

9.滚动处理

const router = new VueRouter({
  //滚动处理
  scrollBehavior(to,from,savePosition){
		
    //如果保存了位置，就返回保存的地方；否则，返回到(0，0)
    if(savePosition){
      return savePosition
    }else{
      return {x:0,y:0 }
    }
    
  }
})