vue系列---【路由】

1.路由介绍

将路径映射到组件

2.路由安装

npm i vue-router --save

3.基本使用

const routes = [
    {
      path:"/login",
      component:login
    },
    {
      path:"/index",
      component:index
    },
    
]

4.路由重定向（一级路由）

{
  path:"*",
    redirect: "/login"
}

5.路由组件

<router-view></router-view>
<router-link></router-link>

5.1.高亮路由导航链接

.footer .router-link-active{
  color: blue;
}

5.2.自定义高亮类名

 <!-- 底部导航 -->
      <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>

6.编程式导航

this.$router.push(path) //添加了一条新的历史记录
this.$router.replace(path) //用新的记录替换当前历史记录
this.$router.go(-1) //返回

7.嵌套路由[二级路由]

{
    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"
      }
    ]
  },

8.路由传参

"/movieDetail?id=1&a=1&b=2"

this.$route.query //{id:"1",a:"1",b:"2"}

9.动态路由

"/foodDetail/1/麻辣烫"

修改路由规则

{
	path:"/foodDetail/:id/:name"
}

this.$route.params //{id:"1",name:"麻辣烫"}

10.命名路由 name

{
    path: "/login",
    component: login,
    // 命名路由
    name:"login"
  },
  {
    path: "/search",
    component: search,
    name:"搜索页面"
  },

 <router-link :to="{name:'搜索页面'}" class="iconfont icon-sousuo"></router-link>

11.命名视图

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")
    },
    
  },

12.路由模式

设置模式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，需要后端配合

13.导航守卫

全局守卫
	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){} //路由离开之前

14.路由元信息 meta

{
  path: "home",
    component: home,
      // 元信息
      meta:{
        title:"首页",
      }
},

this.$route.meta.title

15.懒加载

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"))

16.滚动处理

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 }
    }
    
  }
})