13.路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

hash模式：

1. 地址中永远带着#号，不美观。
1. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
1. 兼容性较好。

效果展示:

history模式：

1. 地址干净，美观。
1. 兼容性和hash模式相比略差。
1. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

效果展示:

案例代码展示:

router-index.js

// 这里配置路由(创建整个应用页面的路由器)

// 首先引入路由
import VueRouter from "vue-router";

// 引入各个组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'

// 创建路由器
const router = new VueRouter({
	// 设置路由器的工作模式
	// 1.hash: 网页url上有 "/#/" ,不美观但是不兼容性较好
	// 2.history : 网页url上没有 "/#/" 简洁美观但是兼容性较差
	mode:'hash',
    // 一级路由
    routes:[
        {   
            //设置管理路由:About
            name: 'guanyu',
            path:'/about',
            component: About,
            meta:{isAuth:true,title:'关于'},
        },
        {   
            //设置管理路由:Home
            name: 'shouye',
            path:'/home',
            component: Home,
            meta:{title:'主页'},
            
            // 二级路由(children属性)
            children:[//通过children配置子级路由
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    name: 'xiaoxi',
                    path:'message',
                    component: Message,
                    // 设置路由的元信息(程序员自定义的一些信息)
                    meta:{
                        // 设置鉴权标志,to带有这个标志的一律鉴定权限
                        isAuth:true,
                        title:'消息',
                    },

                    // 使用三级路由
                    children:[
                        {
                            // 给这个三级路由命名未"xiangqing"
                            name : 'xiangqing',
                            path:'detail',
                            component: Detail,

                            props(route){//这里传入route($route也可以)就能获取到本地路由上的所有数据
                                return {
                                    // 在通过对象赋值的方式传递数到指定的组件(route组件)即可
                                    id: route.query.id,
                                    title: route.query.title 
                                }
                            },

                            meta:{
                                // 设置鉴权标志,to带有这个标志的一律鉴定权限
                                isAuth:true,
                                title:'详情',
                            },
                        }
                    ]
                },
                {
                    // 使用二级路由过后的path不需要再加上"/"
                    name:'xinwen',
                    path:'news',
                    component: News,
                    meta:{
                        // 设置鉴权标志,to带有这个标志的一律鉴定权限
                        isAuth:true,
                        title:'新闻',
                    },
					
					// 设置独享路由守卫(只有一个api,无前置后置之分)
					beforeEnter: (to, from, next) => {
					    console.log('路由守卫的三个参数:',to , from, next);

						// 设置访问权限(localhost里面存数据为school:wyu为放行可见message组件和news组件)
						if(to.meta.isAuth){//检查meta信息判断是否需要鉴定权限
							if(localStorage.getItem('school') === 'wyu'){
								next()//调用放行属性,允许访问该路由组件
							}
							else{
								alert('学校名不对,无权限查看!')
							}
						}
						else{
							next()//不需要鉴权则直接放行
						}
					}
                }
            ]
        },

    ]
})

//设置全局后置路由守卫-初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	// console.log('后置路由守卫',to,from)
	// 路由跳转后将meta下的title属性同步到网页标题上
	document.title = to.meta.title || 'wyu'
})

// 向外暴露路由器
export default router