router路由 导航守卫（基础重点笔记）

一. 安装router

二. 在模块化中使用它

1.导入路由对象 import     form，并且调用Vue.use（VueRouter）安装，调用Vue.use安装插件前需引入Vue

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.通过Vue.use安装插件
Vue.use(VueRouter);

2.创建路由实例，并且传入路由映射配置（导出router）

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    components: about
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes
})// 3.将router对象传入到Vue实例
export default router

3.在Vue实例中挂载创建的路由实例（导入router）

import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

二.使用vue-router的步骤

第一步：创建路由组件

第二步： 配置路由映射：组件和路径映射关系

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    components: about
  }
]

第三步:  使用路由：通过<router-link>和<router-view>（放在哪个位置）

三. 默认路径就是首页

1.多配置一个映射就可以了

  { 
    path: '',
    redirect: 'home' //重定向首页的组件
   },

2. 默认hash为#号网址，改为不带#号的加一句 mode："history"

3.<router-link>一些属性

to：指定hash

tag：指定<router-link>渲染成什么组件

replace：不会留下history记录，不能前进后退

active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

四. 第二种跳转方式(可实行js代码）

用监听事件来绑定如button，在实例化router里写methods在调用方法，this.$router = router

<template>
  <div id="app">  
    <button @click= "homeClick">首页</button>
    <button @click= "aboutClick">分页</button>
    <button @click= "userClick">用户</button>
    <button @click= "profileClick">个人档案</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi',
    };
  },
  methods: {
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.replace("/about")
    },
    userClick(){
      this.$router.replace('/user/' + this.userId)
    },
    profileClick(){
      this.$router.replace({
        path: '/profile',
        query: {
          name: 'why',
          age: '18',
          height: 180
        }
      })
    }
  }
}
</script>

1.push 跟 replace区别 

   push = pushState(可前进后退)

   replace = replaceState（不可前进后退）

2.$router 跟 $route区别

    $router为VueRouter实例，导航页面需要使用.$router.push方法

    $route为当前route跳转对象里面可以获取name，path，query，params等

五. 动态路由

1.创建一个组件

2.在router里引入组件，实例化，搭建映射表 导出

const routes = [
  { 
    path: '',
    redirect: 'home' //重定向
   },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:aaa', //不确定，动态
    component: User
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
})

3.在App.vue里渲染

 <router-link :to ="'/user/' + userId" tag = "button" replace>用户</router-link>
 <router-view></router-view>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan',
    };
  },
  methods: {
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.replace("/about")
    }
  }
}
</script>

4.展示（在组件里用computed调用$route(活跃）params.userId）获得用户的id

<template>
  <div>
    <h2>用于目录</h2>
    <h2>用户页面</h2>
    <h2>{{$router.params.aaa}}</h2>
  </div>
</template>

<script>
export default {
  name: 'User',
};
</script>

六. 打包解析

1. npm run build (打包）

以app开头的是自己写的业务代码

manifest开头的是底层支持

vendor开头的是第三方提供商

2.懒加载，不会出现加载空白

 把import   form ‘’改成 cosnt   =（）=>（‘’） 

// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')

七.嵌套路由

第一步：创建对应的子组件，并且在路由映射中配置对应的子路由

const routes = [
  { 
    path: '',
    redirect: 'home' //重定向
   },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'new'
      }
      ,{
        path: 'new',
        component: HomeNew
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
})

第二步： 在组件内部使用<router-view>标签

七传递参数的方式

传递参数主要有两种类型：params和query

params类型

配置路由格式：/router/:id

传递的方式：在path后跟上对应的值

传递后形成的路劲：/router/123,  /router/abc

网址构成：协议：服务器端口：路劲：query：片段

query的类型：

配置路由格式：/router 普通配置

传递的方式：对象中使用query的可以作为传递方式

传递后形成的路径： /router？id = 123，/router? id = abc

八.导航守卫

路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。

1.生命周期

create（）{}   创建就回调

mounted（）{}  模版挂载在dome时回调

updated（）{}  更新的时候回调

activated() { } 活跃

destroyed() {} 销毁

2.前置钩子跟后置钩子的区别

  前置钩子：beforeEach需要调用next（）执行，在跳转之前执行

router.beforeEach((to, from, next) => {

   next()
 });

后置钩子： afterEach不需要调用next（）执行，跳转之后执行

 router.afterEach((to, from, next) => {
 });

3.使用全局导航守卫

先给路由映射配置元数据 meta：{title： ‘’}，

在通过来统一执行

router.beforeEach((to, from, next) => {
   /* must call `next` */
   document.title = to.matched[0].meta.title;
   console.log(to);
   next()
 });

4.路由导航守卫（注意是Enter）

  {
    path: '/about',
    component: About,
    meta: {
      title: '分页'
    },
    beforeEnter: (to, from, next) => {
      /* must call `next` */
      console.log(111111);
      next()
    }
  },

5.keep-allive 缓存不会销毁

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

1.只有在keep-allive渲染<router-view/>的情况下生命函数才起作用

2.keep-alive有两个非常重要的属性

        include 只有匹配的组件会被缓存

        exclude 匹配组件不缓存，清除缓存重新创建