vue学习 vue-router

路由知识：
这里又涉及到了当初计算机网络中的内容：
公网 -> 调制解调器 -> 路由器 -> 电脑
在内网中，怎么知道公网中传过来的信息是发送给哪个计算机的呢：在路由器中有一个映射表，就是内网的IP地址：对应着电脑的唯一标识（也就是mac地址），通过映射表正确转发。

前端渲染和后端渲染、前端路由和后端路由：
1、后端渲染阶段
后端路由阶段
2、前后端分离阶段：
访问过程：得到url之后，先去静态资源服务器获得html、css、js下载下来，再通过ajax去API服务器下载来具体的数据。
3、单页面富应用SPA阶段：
在前后端分离的基础上加上了一层前端路由，前端来维护一套路由规则。
整个网页只有一个html页面，在前端路由中，url和组件（网页就是一个大的组件）映射起来。（使用vue router进行管理）
前端有一个路由的映射，通过url找到要渲染那一个组件；
将这个组件取出来，放到网页上进行渲染
前端路由的核心：
改变url，但是页面不进行整体的刷新。
如何实现改变url，但是页面不进行整体刷新
1、hash：
location.hash = “目标url”
2、H5中的history
history.pushState({}, ‘’, ‘home’)
pushState实际上是将url压入到一个栈当中；
而history.back()是将压入的url进行出栈，当前URL只显示栈顶的元素
3、replaceState
history.replaceState({}, ‘’, ‘home’)
但是使用这种方法是不能进行返回的。
4、go
history.go(2)前进两次，将之前出栈的两个url再压栈
history.go(-1)后退一次，完成一次出栈操作

vue-router
认识vue-router：
是Vue.js的官方插件，和Vue.js是深度集成的，适合构建单页面应用
vue-router的安装和使用：
直接使用npm进行安装即可：npm install vue-router --save
router路由文件夹下index.js文件中的路由步骤：
1、导入要用到的vue-router和vue
2、通过vue.use(插件名称)安装插件
3、创建VueRouter对象，并在其中创建routes数组，写出url和组件之间的映射关系。（这个数组就是一个路由表）
4、export导出router对象，并将其传入到vue的实例中
js进行导入时，如果传入的是一个文件夹，那么他会自动去找文件夹中的名称为index的文件。
使用vue-router的步骤：
1、创建路由组件：使用vue.use(VueRouter)
2、配置路由映射：在vouter文件夹的index.js文件中修改routes对象数组，这样来规定组件和路径之间的映射关系。
目前routes数组中的对象有两种写法：
①路径对应组件：

{
  path: '/home',
  component: Home // 事先导入的组件
}

②路径对应重定向：

{
  path: '',
  redirect: '/home' // 其他对象中path的值
}

3、使用路由：通过和标签使用路由
中的属性值：
to：要跳转向哪一个url
tag：要将router-link渲染成什么标签（默认为a标签），tag="button"即渲染为按钮标签
replace：在history模式下，禁用返回按钮
active-class: 被选中时给class属性添加一个值，值默认为router-link-active
补充：另外一种全局路由的修改方法：在路由的index文件中mode的同级下，添加linkActiveClass：‘选中时的class属性值’

router的两种模式：
URL中带有#号的是哈希模式
URL中不带有#号的是history模式
模式可以在router的index文件中修改：

const router = new VueRouter({
  // 当前为history模式
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

通过vue-router的相关代码修改路径：
使用this获取当前标签，
在使用vue-router之后，所有组件都有一个$router属性，可以调用push、replace方法进行跳转。
可返回的：this.$router.push('/home');
不可返回的：this.$router.replace('/home');

动态路由：
例如：进入用户个人空间时的路径：user/userId
1、首先将路由表设置为动态路由的形式

{
  path: '/user/:userId',
  component: User // 事先导入的组件
}

2、修改router-link中的to属性，并加上v-bind进行动态绑定。

<router-link :to="'/user/'+userId"></router-link>

如何获取动态路由中的动态部分：
$route.params.userId,在vue中需要加上vue

注：$route和$router之间的区别
$route是获取到当前活跃的url；$router是获取到整个的router对象。

补充知识打包之后会生成三个js文件：
1、app开头的js：所有自己写的业务逻辑代码
2、manifest：为打包的代码进行底层支撑
3、vendor：所有应用的提供商、第三方文件

路由的懒加载：
所谓懒加载就是用到的时候再进行加载。可将不同路由对应的组件分割成不同的js文件，用到那个组件对应的文件时再进去加载对应的js文件，防止一次加载过多文件导致网页上暂时性的空白。
如何使用懒加载：
直接在router的index.js的component使用箭头函数导入要用的组件：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue')
  }
]

使用懒加载进行打包，懒加载的js文件会被另外分离出来，并且以0.、1.作为开头。一个懒加载就对应一个额外的js文件

路由的嵌套：
就是在路由表中，在一个路由对象里面加上children数组，再在这个数组中添加路由对象：

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 在路由对象中嵌套路由
    children: [
      {
        // 在嵌套路由中的子路由部分，不需要加斜杠
        path: 'HomeNews',
        component: HomeNews
      },
      {
        // 在嵌套路由中的子路由部分，不需要加斜杠
        path: 'HomeMessage',
        component: HomeMessage
      }
    ]
  },
]

传递参数的方式：
1、params：
配置路由的格式：/router/:id
传递方式：在path后面跟上对应的值
/router/123

2、query：
配置路由格式：/router（普通配置）
传递方式：在对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123，
使用方式：
①使用router-link标签

/* 传递数据时 */
// 要传递数据to的属性值就不能是一个简单的字符串了，而应该是一个对象
// 要让标签识别对象，要加上v-bind
<router-link :to="{
  path: '/profile'
  query: {
    name: 'name'
  }
}">

/* 显示数据 */
// 和获取路径的方法同理
<h2>{{$route.query.name}}</h2>

②使用其他标签：
不能像router-link直接加上to属性，需要v-on再加上click属性，在methods方法中实现跳转和数据传递：

methods: {
  profileClick() {
    // 跳转，且传递简单数据数据，只需要url对应的字符串即可
    this.$router.push('/user/ + this.userId');
    // 传递较为复杂的数据，需要path和数据对象
    this.$router.push({
      path: '/profile',
      query: {
        name: 'bsy',
        age: 23,
        height: 2.80
      }
    })
  }
}

// 使用数据（与使用router-link标签的相同）
<h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.height}}</h2>

url地址解析：
协议名称 / 主机名称 : 端口号 / 路径 ? 查询 # 碎片(fragment)
scheme / host : port / path ? query # fragment

解释$route和$router之间的区别：
$router是VueRouter实例，想要导航到不同的URL，需要使用$route.push等方法
$route是当前router跳转对象里面可以获取到name、path、query、params等等

补充：所有的组件都继承自vue的原型
$route和$router，都在Vue的原型上进行的添加

导航守卫：
监听路由的跳转：
拿到router对象

导航守卫补充：
beforeEach前置守卫：在跳转前回调
afterEach后置守卫：在跳转后回调