前后端路由
路由就是一个key-value的映射关系。(路径-component/function)
前端路由
前端路由的value即component,不同的路径展示不同的组件。
vue-router专门用来实现SPA应用。
SPA
应用:单页面WEB应用,导航连接的改变不会刷新整个页面,指挥更新局部的页面。并且数据需要通过ajax请求获得。
后端路由
value对应function,根据根据请求路径匹配相应的函数处理响应请求。
基本使用
路由组件
路由组件通常放在项目目录pages或者views中,并且通过路由使用相应的组件。
非路由组件
非路由组件通常放在项目目录components中,并且通过对应标签使用
vue-router使用:
- 下载vue-router:
npm i vue-router
- 引入vue-router:
import VueRouter from 'vue-router'
- 使用vue-router插件:
Vue.use(VueRouter)
- 在入口文件main.js中进行全局注册:
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el: '#app',
render: h => h(App),
router: router
})
- 编写router配置项
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象,去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
通过切换隐藏的路由组件默认是呗销毁的,当需要用的时候再去挂载上。
路由嵌套
多级路由要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置。
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'child1',
component:Child1
},
{
path:'child2',
component:Child2
}
]
}
]
路由传参
query参数
不属于路径中的一部分,路径与参数之间用?
隔开,路由信息配置path时不需要占位
声明式导航传参:
传递参数:
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
接收参数:
$route.query.id
$route.query.title
to的对象写法中的path可以换成name。
编程式导航传参:
传递参数:
this.$route.push({
name:'search',
query:{
k:123
}
接收参数与声明式导航相同。
编程式导航的配置项不能使用path,只能使用name
params参数
属于路径中的一部分,需要注意,在配置路由时,路由信息配置path时需要占位
路由配置时声明接收params参数:
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,
}
]
}
]
}
参数的传递和接收与query参数传递相似
路由携带params参数时,如使用to的对象写法,则不能使用path配置项,必须使用name
命名路由
能够简化路由的跳转
- 给路由命名,增加name属性
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
- 简化跳转:
<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转
</router-link>
路由守卫
全局守卫
//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('house') === 'washroom'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限进入')
}
}else{
next() //放行
}
})
//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'my_house'
}
})
后置路由守卫没有 next
独享守卫
配置独享守卫的路由组件就需要权限进入
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('house') === 'washroom'){
next()
}else{
alert('暂无权限进入')
}
}else{
next()
}
}
组件内守卫
组件内路由守卫是在组件内编写
//通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('house')==='washroom'){
next()
}else{
alert('错误!无权限进入!')
}
}else{
next()
}
},
//通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
next()
}
next()
表示直接放行,
next('/home')
表示直接放行到home路由
next(false)
表示停留在原来的路由
路由独有的两个生命周期钩子
能够对路由组件的激活状态进行捕捉
activated
:路由组件被激活时触发
deactivated
:路由组件失活时触发
路由的两种工作模式
1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
3. hash模式:
1. 地址中永远带着#号,不美观 。
2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
3. 兼容性较好。
4. history模式:
1. 地址干净,美观 。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
更多推荐
Vue Router
发布评论