Vue 实现重定向、404和路由钩子（六）

一、重定向

1.1 修改 Main.vue

1.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

1.3 测试

   启动工程，如下所示：

         在地址栏的后缀输入 main ，显示的内容如下所示，先点击个人信息，再点击回到首页，就可以发现地址栏发生了跳转。

二、显示当前登录的用户姓名

2.1 修改 Login.vue

2.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      // 接收 login 传过来的参数
      path:'/main/:name',
      component:Main,
      // 允许接收参数
      props:true,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

2.3 修改 Main.vue

2.4 测试

        启动工程，网址后缀输入 login，并随便登录，如下所示：

三、路由模式与404

3.1 路由模式

路由默认分为两种，默认的是 hash

        1、hash：路径带 # 符号，如：http://localhost/#/login

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

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

export default new Router({
  mode:'history',
  routes:[
    ]
});

3.2 配置 404

        如果用户访问的路径不存在怎么办？给他返回一个 404 即可，新建一个 NotFound.vue 的试图组件，内容如下所示：

        配置路由信息 index.js 如下：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'
// 导入组件
import NotFound from '../views/user/NotFound'

Vue.use(Router);

export default new Router({
  routes:[
    
    {
      path:'/main/:name',
      component:Main,
      props:true,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    },
    // 做配置
    {
      path:'*',
      component:NotFound
    }
  ]
})

        测试：

 四、路由钩子与异步请求

4.1 路由钩子

        beforeRouteEnter：在进入路由前执行

        beforeRouteLeave：在进入路由后执行

export default {
  name: "Profile",
  // 进入路由前执行
  // 过滤器，从哪来，到哪去，下一步是什么
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next();
  },
  // 进入路由后执行
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  },
}

4.1.1 参数说明

        to：路由将要跳转的路径信息

        from：路径跳转前的路径信息

        next：路由的控制参数

                next() ：跳入下一个页面

                next('/path') ：改变路由的跳转方向，使其跳到另一个路由

                next(false) ：返回原来的页面

                next(vm=>{}) ：仅在 beforeRouterEnter 中可用，vm是组件实例

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

4.2.1 安装 Axios

# cnpm 安装失败了就用 npm 安装，我也安装了好几次才启动成功了
cnpm install axios -s


npm install axios -s

4.2.2 在 main.js 中引用 Axios

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

Vue.use(VueAxios,axios);

4.2.3 创建测试数据

        在 static 目录下创建 mock 文件夹，并创建 data.json，内容如下所示：

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space,bilibili.com/95256449"
    },
    {
      "name": "狂伸说iava",
      "ur1": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

4.2.4 修改 Profile.vue

4.2.5 测试