526互联

Vue-进阶，404页面控制及路由钩子

发布时间 2023-09-25 21:38:07作者: ~java小白~

路由转发传参

我们在使用vue-router时，可能会在Vue实例对象中，写一些方法使用路由的方式完成跳转，其实这种方式也是可以进行转发的

this.$router.push("/main");

 

如上，可以使用字符串拼接，把参数拼接在后面，然后转发，完成参数传递

this.$router.push("/main/"+this.form.username); //拿取表单中的username值

 

更改/main的路由

{
      path: '/main/:username',
      name: 'main',
      component: Main,
      props: true,
}

 

更改main.vue组件

export default {
  props: ['username'],
  name:"main"
}

 

完成以上操作就可以在Vue实例中使用路由也可以带参转发了

拓展：移除地址栏的 #

 更改很简单，因为vue一共有两个模式

  • hash：路径带#，也是默认的，如：localhost/#/login
  • history：路径不带#符号，如：localhost/login

配置在路由文件里，完成如下配置

export default new Router({
  mode: 'history', //更改模式为history，使得地址栏无#
  routes: [
    {
      //登录项
      path: '/login',
      name: 'login',
      component: Login
    },
]
});

 

核心：mode:  'history',

404定向页面 

由于vue中都是以组件的形式存在的，所以我们需要的是一个组件来定义404页面

404.vue组件代码展示：

<template>
<div>
  <h1>404，你已经来到了404的页面了</h1>
</div>
</template>

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

<style scoped>
</style>

 

此组件专用请求资源为空后，需要展示的内容，这里为测试，所以只输出一句话

配置路由，404能被拦截的关键在于，我们页面请求是在路由核心配置里没有的条目，基于这一点，我们就可以使用 ' * ' 符号进行通配，如果其它路由都没有匹配上，说明请求路径不存在，则404

代码展示：

 {
      path: '/*',  //通配，上面路由没匹配上的请求，转发到404
      name: '404page',
      component: error404
    }

 

结果画面：

路由钩子（进入路由，离开路由） 

 beforeRouteEnter：在进入路由之前执行

beforeRouteLeave：在离开路由之前执行

代码展示：

<template>
  <h1>详细信息导航</h1>
</template>

<script>
export default {
  name: "user",
  beforeRouteEnter: (to,from,next)=>{
    console.log('进入路由前执行路由钩子');
    next(); //使用路由钩子必须要有next，不然就会停在这里
},
  beforeRouteLeave: (to,from,next)=>{
    console.log('离开路由前执行路由钩子');
    next();
  }
}
</script>

<style scoped>

</style>

 

路由钩子的参数说明：

  • to：路由即将要跳转的路劲信息
  • from：路由跳转前的路径信息
  • next：路由的控制参数
  1. next（）进入下一个页面，也可以叫路由方向，没有此句话的钩子会停在路由钩子内部
  2. next（' /path'），改变路由的跳转的方向，使其跳到另外一个路由
  3. next（false）返回原来的页面
  4. next（（vm）=>{ }）仅在beforeRouterEnter可用，vm是组件实例

代码展示：

<template>
 <diV>
   <h1>详细信息导航</h1>
   name:{{info.name}}
   <br>
   url:{{info.url}}
 </diV>
</template>

<script>
export default {
  props: ['name'],
  name: "user",
  beforeRouteEnter: (to,from,next)=>{
    console.log('进入路由前执行路由钩子');
    next(vm=>{
      vm.getData();
    }); //使用路由钩子必须要有next，不然就会停在这里
},
  beforeRouteLeave: (to,from,next)=>{
    console.log('离开路由前执行路由钩子');
    next();
  },
  data(){
    return{
      info:{
        name: null,
        url:null
      }
    }
  },
  methods: {
    getData: function (){
      this.axios({method:'get',url:'http://localhost:8080/static/msg.json'}).then(respone=>(this.info=respone.data));
    }
  }
}
</script>

<style scoped>

</style>

 

使用vm实例在beforeRouteEnter钩子里进行异步通信，等于是在进入组件前就使用axios拿到了数据，然后再渲染到组件中去

除了两个钩子的出现时机，上面的代码其它部分都是基本语法

注意：我们使用npm下载axios时需要下载两个，一个时axios本体，一个时整合vue和axios的vue-axios

//使用npm下载
npm install axios
npm install --save vue-axios

//使用cnpm下载
cnpm install axios
cnpm install --save vue-axios

 

再main.js导入也需要注意，两个部件都需要导入

//导入
import axios from "axios";
import VueAxios from "vue-axios";
//使用实例
Vue.use(VueAxios,axios);

 完结，撒花！