路由器独有的生命周期钩子

1. 作用： 捕获路由组件的激活状态
2. 具体：
   1. activated：路由组件被激活时触发。
   2. deactivated：路由组件失活时触发。

路由守卫

作用： 对路由进行权限控制

分类： 全局守卫、独享守卫、组件内守卫

全局路由守卫

所有的路由都可以使用

// 全局前置路由守卫，每次初始化和路由切换之前被调用
// to：去哪儿
// from：从哪儿来
// next：跳转
router.beforeEach((to, from, next) => {
    /* console.log(to, from)
    if (to.name === "xinwen" || to.name === "xiaoxi") {
        if (localStorage.getItem("school") === "尚硅谷") {
            next()
        } else {
            alert("权限不足")
        }
    } else {
        next()
    } */
    // document.title = to.meta.title || "Vue路由案例（Vue Router Demo）"
    if (to.meta.isAuth) {   // 判断是否需要鉴权
        if (localStorage.getItem("school") === "尚硅谷") {
            next()
        } else {
            alert("权限不足")
        }
    } else {
        next()
    }
})

// 全局后置路由守卫，每次初始化和路由切换之后被调用
// to：去哪儿
// from：从哪儿来
router.afterEach((to, from) => {
    document.title = to.meta.title || "Vue路由案例（Vue Router Demo）"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

独享路由守卫

某一个路由所独享的守卫，只有前置路由守卫

{
	name: "xinwen",
	path: 'news',
	component: News,
	meta: {isAuth: true, title: '新闻', },
	// 进入之前
	beforeEnter: (to, from, next) => {
        if (to.meta.isAuth) {   // 判断是否需要鉴权
            if (localStorage.getItem("school") === "尚硅谷") {
                next()
            } else {
                alert("权限不足")
            }
        } else {
            next()
        }
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

组件内守卫

组件所独有的路由守卫，通过路由规则进入时和离开时调用

beforeRouteEnter (to, from, next) {
    if (to.meta.isAuth) {   // 判断是否需要鉴权
        if (localStorage.getItem("school") === "尚硅谷") {
            next()
        } else {
            alert("权限不足")
        }
    } else {
        next()
    }
},
// 通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {
	next()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

路由器的两种工作模式和打包上线

两种工作模式和打包上线

http://localhsot:8080/#/
1

1. “#”：是url的hash值，#及之后的内容都是hash值。hash值不会包含在http请求中，不会带给服务器。
2. hash模式：
   1. 地址中带#号，不美观。
   2. 通过第三方手机app分享，若app校验严格，则地址会被标记不合法。
   3. 兼容性较好。
3. history模式：
   1. 地址干净，美观。
   2. 兼容性相比hash模式略差。
   3. 应用上线时需要后端人员支持，解决刷新页面404问题。

打包上线

使用命令：

npm run build
# 或
yarn run build
1
2
3

打包之后会生成一个dist的文件夹，将里面的内容部署上线

Element-ui使用注意

1. 没有.babelrc文件，配置在babel.config.js文件中
2. 官网上写的["es2015", { "modules": false }]在新版的vue-cli上使用["@babel/preset-env", { "modules": false }]