Vue基础26之路由第五节

路由

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的问题