Vue-router(路由)

router-路由

一、前端路由

1. 路由对于后端来说就是请求的路径和接口函数的一一对应关系。
2. 前端路由的核心就是，改变url ，但是页面不会进行刷新。也就是路径的变化和不同的组件之间的切换。（地址---视图）

二、路由规则

哈希模式（hash）

• URL 中的hash，本质上是改变Windows中的href属性，通过location.hash()来改变href，但是页面不会刷新。
• 地址栏带#号，刷新时发送请求不被带到后端

新增的history模式

• history.pushState({},'',?url) ： 改变href不刷新页面

• history.pushState({},'',?url) ： 替换上一个

• history.go(-1) : 返回上一页

三、Vue-router的使用

1.路由的使用

在views下新建vue文件，找到router/index.js

import Vue from 'vue'
import VueRouter from 'Vue-router'
Vue.use(VueRouter)
const routes=[
    {
        //配置路径地址
        path:"/home",
        name:"Home",
        //懒加载，
        component:()=> import (/*webPackChunkName : "home"*/ "对应想要显示的组件的路径")
    }
]

2.懒加载

页面刷新，只有指定的页面才会被加载，被设置为函数component:()=> import (/*webPackChunkName : "home"*/ "对应想要显示的组件的路径")不会立即执行

• 懒加载的方式

  // 方式一: 结合Vue的异步组件和Webpack的代码分析
  const User = resolve => { require.ensure(['@/views/User.vue'], () => { resolve(require('@/views/User.vue')) }) };
  
  // 方式二: AMD写法
  const User = resolve => require(['@/views/User.vue'], resolve);
  
  // 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.   常用
  const Home = () => import(/* webpackChunkName: "user" */ '../views/User.vue')
  
  

3.路由嵌套

在配置的路由下面，继续添加

const routes=[
    {
        //配置路径地址
        path:"/home",
        name:"Home",
        //懒加载，
        component:()=> import (/*webPackChunkName : "home"*/ "对应想要显示的组件的路径"),
        children:[{
                //相对路径和绝对路径两种写法
             path : "",
             component:()=> import (/*webPackChunkName : "home"*/ "对应想要显示的组件的路径")
         }]
     }
]

4.keep-alive

具有缓存作用，<router-view />展示在keep-alive 标签下面时组件将会被缓存

• 原理

  组件之所以会被缓存是因为，keep-alive 标签可以将组件生命周期的销毁和创建阶段拦截（destroyed）（created）

  此时生命周期的beforeactivated()和activated()被激活

• include

  指定需要缓存的组件

  配置路由的时候添加name属性，

  <keep-alive :include=['name']>
      <router-view />
  </keep-alive>
  

• exclude

  指定不需要缓存的组件，同上

5.query和params

• 编程式导航

  查询字符串参数 ： query

  $router是路由对象

  //跳转指定组件
  this.$router.push("/user?page=22&size=5")
  this.$router.push({
      path:"",
      query:{
          page:5,
          size:10,
      }
  })
  this.$router.push({
      //路由命名
      name : ""  //配置路由时的name属性
  })
  

  路径信息参数 ： params

  this.$router.push("/user/55824855")
  this.$router.push({
      //只支持name
      name : "User",
      params : {
          id : 55824855
      }
  })
  

  params 传参数相当于在路径上直接添加

  //App.vue中：
  this.$router.push('/user/12');
  
  // router/index.js中：
  path: '/user/:userId',
      
  // User.vue中：
  created(){
      console.log(this.$route.params.userId);    // 获取到用户id12
  }
  

<font color="red">编程式导航中，使用name进行路径跳转，携带参数可以通过params和query，其中query会将参数携带在导航路径上，而使用path进行路径跳转，无法携带params，只能携带query。</font>

6.获取参数

this.$route.query.page  ||  this.$rote.params.id

• $route也是路由下的对象，可以获取到当前组件下配置的路由信息

7.重定向

const routs = [
    {
       //当页面刷新或者导航栏上的地址只剩'/' 时，将地址栏上的地址重定向为 '/home/user' 
        path : "/",
        redirect : "/home/user"
    }
]