Vue基础26

• 路由
• • history模式和hash模式
  • • 默认情况是hash模式
    • history模式
    • • src/router/index.js
    • history模式的项目打包成静态资源
    • 使用node部署服务器测试
    • • 使用express框架搭建服务器
      • • 初始化项目
        • 安装express框架
        • 新建server.js文件
        • 启动服务器
      • history模式访问资源
      • • 引入资源并启动服务
        • 浏览器查看
      • 使用hash模式启动服务器
      • • src/router/index.js
        • 重新打包静态资源并在服务器端重新换一份资源
  • 解决history缺陷
  • • 使用nodejs的中间件 connect-history-api-fallback
    • 安装
    • 使用插件
    • • server.js
    • 开启history模式并重新build
  • 总结：路由器的两种工作模式

路由

history模式和hash模式

默认情况是hash模式

history模式

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";//创建并暴露一个路由器
const router=new VueRouter({mode:'history',  //开启history模式routes:[{name:'guanyu',path:'/about',component:About,meta:{isAuth:true,title:"关于"},//设置权限},{name:"zhuye",path:'/home',component:Home,meta:{title:"主页"},children:[{name:'xinwen',path:'news',component:HomeNews,meta:{isAuth:true,title:"新闻"},  //增加权限控制//独享前置路由守卫（只有前置）beforeEnter:(to, from, next)=>{if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='lucky'){next()}else{alert("学校名不对，无权限查看！")}}else{next()}}},{name:'xiaoxi',path:'message',component:HomeMessage,meta:{isAuth: true,title:"消息"},children:[{name:'xiangqing',// path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容path:'detail',  //query的写法component:Detail,meta:{isAuth: true,title:"详情"},//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件// props:{a:1,b:'你好啊'},//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true,//props的第三种写法：函数式(最普通的写法)/*props($route){return {id:$route.query.id,title:$route.query.title}}*///第三种：函数式（解构赋值的写法）/*props({query}){return{id:query.id,title:query.title}}*///第三种：函数式(解构赋值之后再解构赋值)props({query:{id,title}}){return {id,title}}}]}]}]
})//全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
/*router.beforeEach((to,from,next)=>{console.log("前置守卫",to,from)// if(to.name=="xinwen"||to.path=="/home/message"){if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem("school")==="lucky"){next()}else{alert("学校名字不对，无权限查看")}}else{next()}
})*///全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{// console.log("后置路由守卫",to,from)document.title=to.meta.title||"xx系统"
})
export default  router

开发上线不太友好

history模式的项目打包成静态资源

html,css,js样式的资源

npm run build

打包好的资源：

使用node部署服务器测试

使用express框架搭建服务器

初始化项目

npm init

安装express框架

npm i express

新建server.js文件

//引入express框架
const express=require('express')
//创建express对象
const app=express()app.get('/person',(request,response,)=>{response.send({name:'tom',age:18})
})//监听端口
app.listen(5005,(err)=>{if(!err) console.log("服务器启动成功了")
})

启动服务器

node server

history模式访问资源

引入资源并启动服务

浏览器查看

由于是history模式，所以出问题了

使用hash模式启动服务器

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";//创建并暴露一个路由器
const router=new VueRouter({mode:'hash',  //开启hash模式// mode:'history',//开启history模式routes:[{name:'guanyu',path:'/about',component:About,meta:{isAuth:true,title:"关于"},//设置权限},{name:"zhuye",path:'/home',component:Home,meta:{title:"主页"},children:[{name:'xinwen',path:'news',component:HomeNews,meta:{isAuth:true,title:"新闻"},  //增加权限控制//独享前置路由守卫（只有前置）beforeEnter:(to, from, next)=>{if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem('school')==='lucky'){next()}else{alert("学校名不对，无权限查看！")}}else{next()}}},{name:'xiaoxi',path:'message',component:HomeMessage,meta:{isAuth: true,title:"消息"},children:[{name:'xiangqing',// path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容path:'detail',  //query的写法component:Detail,meta:{isAuth: true,title:"详情"},//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件// props:{a:1,b:'你好啊'},//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true,//props的第三种写法：函数式(最普通的写法)/*props($route){return {id:$route.query.id,title:$route.query.title}}*///第三种：函数式（解构赋值的写法）/*props({query}){return{id:query.id,title:query.title}}*///第三种：函数式(解构赋值之后再解构赋值)props({query:{id,title}}){return {id,title}}}]}]}]
})//全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
/*router.beforeEach((to,from,next)=>{console.log("前置守卫",to,from)// if(to.name=="xinwen"||to.path=="/home/message"){if(to.meta.isAuth){  //判断是否需要鉴权if(localStorage.getItem("school")==="lucky"){next()}else{alert("学校名字不对，无权限查看")}}else{next()}
})*///全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{// console.log("后置路由守卫",to,from)document.title=to.meta.title||"xx系统"
})
export default  router

重新打包静态资源并在服务器端重新换一份资源

解决history缺陷

使用nodejs的中间件 connect-history-api-fallback

安装

npm i connect-history-api-fallback

使用插件

server.js

//引入express框架
const express=require('express')
//引入history的中间件
const history=require('connect-history-api-fallback')
//创建express对象
const app=express()
//在引入静态资源前引入history中间件
app.use(history())
//引入静态资源
app.use(express.static(__dirname+'/static'))app.get('/person',(request,response,)=>{response.send({name:'tom',age:18})
})//监听端口
app.listen(5005,(err)=>{if(!err) console.log("服务器启动成功了")
})

开启history模式并重新build

总结：路由器的两种工作模式

1. 对于一个url来说，什么是hash值？——#及其后面的内容就是hash值
2. hash值不会包含在http请求中，即：hash值不会带给服务器
3. hash模式：
   （1）地址中永远带着#号，不美观
   （2）若以后将地址通过第三方手机app分享，若app校验合格，则地址会被标记为不合法
   （3）兼容性较好
4. history模式
   （1）地址干净，美观
   （2）兼容性和hash模式相比略差
   （3）应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题