路由器提供了两种机制:路由和转送
- 路由是决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
路由中有一个非常重要的概念叫做路由表(路由表本质就是一个映射表,觉得了数据包的指向)
三大框架,都有自己的路由实现:
- 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
- 创建路由组件
- 配置路由映射:组件和路径映射关系
- 使用路由:通过<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里面,所有路径匹配到的视图组件都会被缓存