Vue-router
Vue-router认识路由前端渲染与后端渲染url的hash和HTML5的historyvue-router的基本使用路由的懒加载vue-router嵌套路由Vue-router参数传递Vue-router导航守卫keep-alive
Vue-router
认识路由
- 概念
路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动
- 路由器提供了两种机制:路由和转送
- 路由是决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
- 路由是决定数据包从来源到目的地的路径
- 路由表
- 路由表本质上就是一个映射表,决定了数据包的指向
- 区别
- 后端路由
- 后端处理URL与页面间的映射关系
- 前后端分离
- 后端只负责提供数据,不负责任何界面的内容
- 前端渲染:浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页
- 后端只提供 API来返回数据,前端通过Ajax返回数据,通过js将数据渲染到页面中
- 后端只负责提供数据,不负责任何界面的内容
- 单页面富应用(SPA页面)
- 在前后端分离基础上,又加上了一层前端路由。区别
- 整个网页只有一个html页面
- 改变url,但是页面不进行整体的刷新
- 在前后端分离基础上,又加上了一层前端路由。区别
- url的hash
- url的hash也就是锚点(#),本质上是改变window.location的href属性
- 可以通过直接赋值location.hash来改变href,但是页面不发生刷新
location.hash = "aaa" url变为"localhost:8080/aaa"
- url的hash也就是锚点(#),本质上是改变window.location的href属性
- HTML5的history模式
- pushState
localhost:8080"> history.pushState({},'',home)// localhost:8080/home history.pushState({},'',about)// localhost:8080/about history.pushState({},'',mine)// localhost:8080/mine //以上相当于入栈 history.back() //后退,相当于出栈 history.forward() //前进,相当于压栈
- replaceState(): 替换url,back方法失效
- pushState
- 安装
npm install vue-router --save
- 使用
- 导入路由对象,并且调用Vue.use(VueRouter)
- 创建路由实例,并传入路由映射配置
- 在Vue实例中挂载创建的路由实例
- 导入路由对象,并且调用Vue.use(VueRouter)
- 配置路由映射关系
- 创建路由组件
- 配置url和组件的映射关系
- 使用路由,通过
和
- 创建路由组件
- 路由的默认路径
path: '', redirect: '/home' }]
- 默认是hash模式,可以修改成history模式
routes; mode: 'history' })
- router-link的属性
- to:由于指定跳转的路径
- tag:默认router-link会渲染成a标签,如果想渲染成别的标签,则可以使用此属性
- replace:replace不会留下history记录,前进后退无法使用,相当于replaceState()
- active-class: 激活的router-link默认会有一个router-link-active的类,如果不想使用默认类,则可以使用这个属性
//如果修改active-class,如果有多个router-link可能需要多处修改,也可以修改一个地方 const router = new VueRouter({ routes; mode: 'history', linkActiveClass: 'active' })
- to:由于指定跳转的路径
- 通过代码修改路由
this.$router.push('/home')
可以使用返回前进按钮this.$router.replace('/home')
前进后退不能用
- 动态路由
export default { name: '#app', data(){ return { userId: 'zhangsan' } } } { path: '/user/:userId', component: User } //获取参数 this.$route.params.userId {{$route.params.userId}}
- npm run build后生成3个js文件 app.js manifest.js vender.js
app.js中是自己写的业务代码
manifest.js是为了打包的代码做底层支撑
vender.js中的是使用的第三方包
- 为什么要懒加载?
- 打包构建应用时,js文件比较大,会影响页面加载
- 如果能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样更加高效
- 打包构建应用时,js文件比较大,会影响页面加载
- 如何进行路由懒加载
import Home from '@/components/Home' import About from '@/components/about' Vue.use(VueRouter) const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] ? //使用路由懒加载 const Home = ()=>import('@/components/Home') const About = ()=>import('@/components/About') const routes = [ { path: '/home', component: Home }, { path: 'about', component: About } ]
- 什么是嵌套路由?
- 比如在Home页面,希望通过/home/news和/home/message访问一些内容
- 一个路径映射一个组件,访问这两个路径也会分别渲染两个组件
- 比如在Home页面,希望通过/home/news和/home/message访问一些内容
- 如何实现嵌套路由?
- 创建对应的子组件,并在路由映射中配置对应的子路由
- 在组件内部使用
标签
{ path: '/home', component: Home, children: [ path: 'news',//前面不要加/ components: News ] } ]
- 创建对应的子组件,并在路由映射中配置对应的子路由
- 传递参数主要有两种类型params和query
- params的类型
- 配置路由格式:/router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路径:/router/123, /router/abc
- 配置路由格式:/router/:id
- query的类型
- 配置路由格式:/router
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/router?id=123, /router?id=abc
- 配置路由格式:/router
{{$route.query.name}}//取参
- params的类型
- 什么是导航守卫?
- vue-router提供的导航守卫主要用来监听路由的进入和离开
- vue-router提供了beforeEach和afterEach的钩子函数,他们会在路由改变前和路由改变后触发
- vue-router提供的导航守卫主要用来监听路由的进入和离开
- 一个小需求,根据路由的变化修改title值
path: '/home',
component: Home,
children: [...],
meta: {
title: '首页'
},
path: '/about',
component: About,
meta: {
title: '关于
}
]
?
const router = new VueRouter({
routes,
mode: 'history',
linkActiveClass: 'active
})
//前置守卫, 必须调用next方法全局守卫
router.beforeEach((to, from, next)=>{
document.title = to.meta.matched[0].title
next()
})
/*
导航钩子的三个参数:
to: 即将要进入的目标的路由对象
from: 当前导航即将要离开的路由对象
next: 调用该方法后,才能进入下一个钩子 */
router.afterEach((to, from)=>{})
- 除了全局守卫,还有路由守卫和组件内守卫
const routes = [ { path: '/home', component: Home, beforeEnter(to, from ,next){ } } ]
- keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
- include- 字符串或正则表达式, 只有包含的组件会被缓存
- exclude- 字符串或正则表达式, 排除的组件不会被缓存
- include- 字符串或正则表达式, 只有包含的组件会被缓存
- router-view也是一个组件,如果直接被包含在keep-alive里面,所有路径匹配到的试图组件都会被缓存
- 【Vue-router】只有被keep-alive包围时,actived和deactived方法才会被调用
推荐阅读
- dubbo基本认识
- “留一手”的误区认识
- 学习基金第五课:认识巴菲特赌输了的指数基金|学习基金第五课:认识巴菲特赌输了的指数基金 2018-10-12
- 32号-1.21-认识我的情绪
- 毛_草稿
- 认识职业发展
- 闰蜜
- 这五种盐城打桩机,你认识几种
- 认识图表
- 【思维导图实战派】刻意练习计划“遇见……”|【思维导图实战派】刻意练习计划“遇见……” 1/300 人教版数学五下第三单元《正方体和长方体的认识》