路由复习笔记

路由器提供了两种机制:路由和转送

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

路由中有一个非常重要的概念叫做路由表(路由表本质就是一个映射表,觉得了数据包的指向)

三大框架,都有自己的路由实现:

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

路由的使用

1.终端安装 

 npm install vue-router --save

2.导入路由对象

import VueRouter from 'vue-router'，

3.调用 Vue.use(VueRouter),安装插件

4.创建路由实例,并且传入路由映射配置

const routes =[
    {
      path:'/路由名称'
      component:'组件'
    },
    {
      path:'/路由名称'
      component:'组件'
    }]
const router =new VueRouter({
    //配置路由和组件之间的应用关系
    routes
    })

5.在Vue实例中挂载创建的路由实例

export default router

使用vue-router

1. 创建路由组件
2. 配置路由映射:组件和路径映射关系
3. 使用路由:通过<router-link>和<router-view>(进行占位)

如何使用代码跳转路由?

this.$router.push('/路由')

动态路由(路由传参的其中一种方法)

//传送值

//路由index.js内
{
  path:'/user/:userId',
  component:User
}
//跳转页面
this.$router.push('/user/'+this.userId)


//获取路由值
//在获取路由的组件内
computed:{
  userId(){
    return this.$route.params.abc
  }
}

路由懒加载

import Home form ".../components/Home"

//懒加载(放在index.js内)
const Home ()=>import('../components/Home')

keep-alive

作用:可以使包含的组件保留状态或者避免重新渲染

include:字符串或正则表达式,只有匹配的组件会被缓存

exclude:字符串或正则表达式,任何匹配组件不会被缓存

注:router-view 如果直接被包裹在keep-alive里面,所有路径匹配到的视图组件都会被缓存