160_Vue实战：路由模式，404，路由钩子

目录

路由模式

路由模式有两种

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

image.png
路由模式不设置，默认hash，也可以显式设置

export default new Router({
  mode: "hash",
  routes: [
    
  ]
});

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

image.png
修改路由配置index.js，设置mode: "history"

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

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      path: '/main/:username',
      component: Main,
      props: true,
      children: [
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile
        },
        {
          path: '/user/list/:id/:name',
          name: 'UserList',
          component: UserList,
          props: true
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/goHome',
      redirect: '/main'
    }
  ]
});

404

image.png

创建一个名为 NotFound.vue的视图组件

<template>
  <div>
    <h1>404，你的页面走丢了</h1>
  </div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

修改路由配置，配置404路由

import NotFound from "../views/NotFound";

{
  path: '*',
  component: NotFound
}

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

import NotFound from "../views/NotFound";

Vue.use(Router);

export default new Router({
  mode: "hash",
  routes: [
    {
      path: '/main/:username',
      component: Main,
      props: true,
      children: [
        {
          path: '/user/profile/:id',
          name: 'UserProfile',
          component: UserProfile
        },
        {
          path: '/user/list/:id/:name',
          name: 'UserList',
          component: UserList,
          props: true
        }
      ]
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/goHome',
      redirect: '/main'
    },
    {
      path: '*',
      component: NotFound
    }
  ]
});

image.png

路由钩子

beforeRouteEnter：在进入路由前执行

beforeRouteLeave：在离开路由前执行

<template>
  <div>
    <h1>用户列表</h1>
    {{id}}
    {{name}}
  </div>
</template>

<script>
export default {
  name: "UserList",
  props: ['id','name'],
  beforeRouteEnter: (to,from,next)=>{
    console.log("进入路由之前");
    next();
  },
  beforeRouteLeave: (to,from,next)=>{
    console.log("离开路由之前");
    next();
  }
}
</script>

<style scoped>

</style>

参数说明：

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

钩子函数中使用异步请求

axios官网：http://www.axios-js.com/

安装 Axios cnpm install axios vue-axios -s

PS D:\code\vue\hello-vue> cnpm install axios vue-axios -s
√ Installed 2 packages
√ Linked 3 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 7s(network 7s), speed 7.29KB/s, json 3(49.92KB), tarball 3.89KB)
PS D:\code\vue\hello-vue>

main.js引用 Axios

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

Vue.use(VueAxios, axios);


import Vue from 'vue'
import App from './App'

import router from './router'

// 导入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

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

Vue.use(VueAxios, axios);

// 安装路由
Vue.use(router);

// 安装ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  router, // 启用路由
  render: h => h(App) // 启用ElementUI
})

准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下

image.png

/static/mock/data.json

{
  "name": "haoran",
  "url": "https://blog.csdn.net/adsdaas",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "haoran",
      "url": "https://blog.csdn.net/adsdaas"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

在 beforeRouteEnter 中进行异步请求

<template>
  <div>
    <h1>用户列表</h1>
    {{id}}
    {{name}}
  </div>
</template>

<script>
export default {
  name: "UserList",
  props: ['id','name'],
  beforeRouteEnter: (to,from,next)=>{
    console.log("进入路由之前");
    next(vm => {
      vm.getData(); // 进入路由之前执行getData
    });
  },
  beforeRouteLeave: (to,from,next)=>{
    console.log("离开路由之前");
    next();
  },methods: {
    getData: function () {
      this.axios({
        method: "get",
        url: "http://localhost:8080/static/mock/data.json"
      }).then(function (response) {
        console.log(response);
      });
    }
  }
}
</script>

<style scoped>

</style>

image.png

posted @ 2021-11-20 00:02  清风（学习-踏实）  阅读(81)  评论(0)    收藏  举报