Vue ——09、路由模式，404和路由勾子

一、路由模式（有#号，跟没#号）

路由模式有两种

• hash：路径带 # 符号，如 http://localhost/#/login
• history：路径不带 # 符号，如 http://localhost/login

1、修改路由配置，代码如下：

export default new Router({
  mode: 'history',			//添加这一行
  routes: [
  ]
});
1
2
3
4
5

地址没有 # 号了

二、404

1.创建一个NotFound.vue视图组件

<template>
    <div>
      <h1>404,你的页面走丢了h1>
    div>
template>
<script>
    export default {
        name: "NotFound"
    }
script>
<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13

2.修改路由配置index.js

import NotFound from '../views/NotFound'


{
   path: '*',
   component: NotFound
}

1
2
3
4
5
6
7
8

3.当访问一个不存在的请求时

三、路由勾子

beforeRouteEnter：在进入路由前执行
beforeRouteLeave：在离开路由前执行

参数说明：

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
• next() 跳入下一个页面
• next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
• next(false) 返回原来的页面
• next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

看一下效果

四、在钩子函数中使用异步请求

1、首先，安装 axios

cnpm install --save vue-axios
1

2、main.js引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'


Vue.use(VueAxios, axios)
1
2
3
4
5

3、在static下创建一个json数据文件

4、接着我们在路由之前，拿到数据

5、看一下效果，没有问题

————————

创作不易，如觉不错，随手点赞，关注，收藏(*￣︶￣)，谢谢~~