一、Vue-Router作用

个人理解：
就是拼接完整的URL，负责了端口号之后的路径[参数]这部分。

URL：http://<host>:<port>/<path>?<searchpart>

二、路由配置及使用

1、配置参数

“path” 用于配置访问路径
“name” 用于给该路由命名
“component” 表示需要映射的组件
“redirect”表示重定向
“children”用于路由嵌套

2、默认路径（相对路径和绝对路径）

const routes = [
	{
	  path: '/',
	  redirect: '/root',
	},
	{
	  path: '/root',
	  name: 'root',
	  component: Root,
	},
]

注意
（1）path: '/'配置的是根路径：/。反映到URL上就是/<path>的/部分。
（2）redirect: '/root'，是指将根路径（/）重定向到根路径下的root路径下（/root）
（3）path: '/root',需要带“/”，表示根路径下的root路径下（/root）

（1）带“/”和不带“/”的区别

带/，表示绝对路径，/是根路径，表示的是/<path>的/部分。
不带/，表示相对路径，相对于父路由下的路径（如果没有则找到根路径）
注意：
一般是在path或redirect里可能用到“/”。

父路由如何判断方式？
从当前相对路径的代码行（path、redirect都可以）开始，往上找一个包裹他的路由就是父路由

3、路由嵌套（路由重定向）

const routes = [
  {
    path: '/',
    redirect: '/root',
  },
  {
    path: '/root',
    name: 'root',
    component: Root,
    redirect: '/root/child1',
    children: [
      // {    // 等效于 外层的  redirect: '/root/child1',
      //   path:'',
      //   redirect:'child1'
      // },
      {
        path: 'child1',  // 等效于'/root/child1'
        name: 'child1',
        component: child1,
        redirect: '/root/child1/child3',
        children:[
          {
            path: 'child3', // 等效于'/root/child1/child3'
            name: 'child3',
            component: child3,
          }
        ]
      }
    ]
  }
]

redirect: '/root/child1',表示重定向到根路径下的root下的child路径

注意
（1）如果写成redirect: 'root/child1'，也可以到http://192.168.1.8:8080/root/child1，是因为root的相对路径本就是根路径/，所以没问题
（2）如果写成redirect: '/child1'，路径会到http://192.168.1.8:8080/child1，因为 '/child1'的意思是根路径下的child1路径
（3）如果写成redirect: 'child1'，等效于redirect: '/child1'
（4）等效于children里的{ path:'', redirect:'child1' }

第一个children下的配置

注意
path: 'child1'，不需要写“/”，
不写“/”代表相对路径，先找他的父组件/root，最终等效于/root/child1
写了“/”代表绝对路径，直接匹配/child1

children的多层嵌套（第二个children下的配置）

注意
redirect: '/root/child1/child3'等效于redirect: 'child1/child3'，都是指向/root/child1/child3
还是相对路径和绝对路径的问题，不过第一种写法更利于阅读

4、动态路由匹配

参数获取

一个“路径参数”使用冒号:标记。
通过this.$route.params.[id]获取路径中的变量，[id]只跟在routes里定义的变量名有关
在vue文件中需要写成this.$router.push('/user/kobe/id/111')

5、路由传参

（1）vue文件中传参

注意：
（1）通过query传参，既可以写path，也可以写name。通过this.$route.query.id获取参数
（2）通过params不能写path，只能写name + params。通过this.$route.params.id获取参数

//子路由配置
{
  path: '/child1,
  name: 'child1',
  component: child1
}
//父路由编程式传参(一般通过事件触发)
root1 () {
  // query传参
  this.$router.push({ path: '/child1', query: { id: '123' } })   // /child1?id=123
  this.$router.push({ name: 'child1', query: { id: '456' } })   // /child1?id=456
  // params传参
  this.$router.push({ name: 'child1', params: { id: '789' } })
}

（2）routes里传参

注意：
（1）redirect重定向可以使String类型，也可以是Object类型，Object类型可以携带参数
（2）不能在路由对象中单独添加query和params属性，没有这两个属性，参考下例的root路由

const routes = [
  {
      path: '/',
      // redirect: '/root', // 无参数情况
      // query传参
	  redirect: {path:'/root', query:{ id: '123' }},  // /root?id=123
	  // redirect: {name:'root', query:{ id: '456' }},  // /root?id=456
	  // params传参
	  // redirect: {name:'root', params:{ id: '789' }},
  },
  {
	  path: '/root',
	  name: 'root',
	  component: Root,
      // query:{      错误写法
      //   id: '123'
      // }
	},
]

6、 keep-alive使用

作用

可以使被包含的组件保留状态（数据保存），避免组件频繁的被创建和销毁
它们有两个非常重要的属性:
include – 字符串或正则表达，只有匹配的组件会被缓存
exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存

使用

keep-alive包裹router-view时，对应所有路径的组件都会被缓存

<keep-alive exclude="Profile,User">  // Profile,User这两个组件不缓存，中间不要加空格
   <router-view></router-view>
</keep-alive>

场景（保存页面离开时的数据）

7、路由的懒加载

// 路由的懒加载
const child1 = () => import(/* webpackChunkName: "child1" */ '../views/router-test/child1.vue')

const routes = [
  {
    path: '/child1',
    name: 'child1',
    component: child1,
  }
]