×

聊聊vue中的路由原理以及一些简单的应用

作者:Terry2020.08.26来源:Web前端之家浏览:7882评论:0
关键词:vuejsvue-router

Web前端开发的时候,经常会用到vue中的路由原理以及一些简单的应用。对于大多数单页面应用,都推荐使用官方支持的vue-router库。

Vue Router是Vue.js官方路由器。它与Vue.js核心深度集成,使使用Vue.js轻松构建单页应用程序变得轻而易举。功能包括:

  • 嵌套路线/视图映射

  • 模块化,基于组件的路由器配置

  • 路由参数,查询,通配符

  • 查看由Vue.js过渡系统提供动力的过渡效果

  • 细粒度的导航控制

  • 与自动活动CSS类的链接

  • HTML5历史记录模式或哈希模式,在IE9中具有自动回退

  • 可自定义的滚动行为

从零开始简单的路由

如果你只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

结合 HTML5 History API,你可以建立一个麻雀虽小但是五脏俱全的客户端路由器。

整合第三方路由

如果你有更偏爱的第三方路由,如 Page.js 或者 Director,整合起来也一样简单。

说了这么多,还不如来点实例演示下,如果去应用路由,go go go!!!!

vue中的路由实例

需求1:从填写表单A页面跳转到B页面,然后再从B页面返回到A页面,实现A页面的所填的数据保留。

一.设置路由缓存:

1.App.vue中加入<keep-alive> 具体代码如下:

<template>
 <div id="app">
 <!--<img src="./assets/logo.png">-->
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive">
  <!-- 这里是会被缓存的视图组件A -->
  </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件B -->
 </router-view>
 </div>
</template>

2.在路由配置文件index.js里面增加meta标签,代码如下:

export default new Router({
 routes: [
 {
  path: '/',
  name: 'Initinfo',
  component: Initinfo
 },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }
 
 ]
})

ok,做到这里,就能实现以上需求1。

需求2:在需求1基础上,增加一个需求就是,缓存A表单页面滚动位置

代码如下:

export default new Router({
 
 //使用keep-alive后,可能存在滚动条问题的解决问题
 mode:'hash',//默认是hash模式 且有history
 scrollBehavior(to,from,savePosition) { // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
  console.log(to) // to:要进入的目标路由对象,到哪里去
  console.log(from) // from:离开的路由对象,哪里来
  console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
  if(savePosition){
   return savePosition;
  }else{
   return {
    x: 0,
    y: 0
   }
  }
 },
 routes: [
  {
   path: '/',
   name: 'Initinfo',
   component: Initinfo
  },
  {
   path: '/B',
   name:'B',
   component: CredentialsDetails,
   meta:{keepAlive:false}
  },
  {
   path: '/A',
   name:'A',
   component: ASeal,
   meta:{keepAlive:true}
  }
 
 ]
})

需求3:

1.默认显示 A

2. B跳到 A,A 不刷新

3. C跳到 A,A 刷新

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

以上是路由守卫官网,可以参考,下面介绍两个守卫:beforeRouteLeave,beforeRouteEnter

1.在路由的index.js文件,和以上路由一样,设置A页面的meta属性,代码如下:

{
 path: '/A',
 name:'A',
 component: ASeal,
 meta:{keepAlive:true}
 }

2. 在B组件设置 beforeRouteLeave:代码如下:

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = true; // 让 A 缓存,即不刷新
  next();//确保要调用 next 方法,否则钩子就不会被 resolved
 }
};

3.在C组件设置 beforeRouteLeave:代码如下:

export default {
 beforeRouteLeave(to, from, next) {
  console.log(to);
  console.log(from)
  // 设置下一个路由的 meta
  to.meta.keepAlive = false; // 让 A不缓存,即刷新
  next();//确保要调用 next 方法,否则钩子就不会被 resolved
 }
};

ok,以上代码即可满足需求3

需求4:

1.A-->B-->C-->D 从A页面依次进入BCD页面,现在我要在D页面点击返回(手机或者浏览器物理返回键)回到A页面

2.A-->E-->D 从A页面一次进入ED页面,现在我在D页面点击返回(手机或者浏览器物理返回键)回到E页面

以上的需求总结来说就是,根据不同的渠道进入D页面的时候,当点击返回的时候,进入不同的页面

1.首先我在入口main.js里面声明了一个全局变量(当然你可以按照自己的方式去声明一个变量)

global.beforeRouteName = "";   

2.然后在D组件中,声明路由守卫:beforeRouteEnter,代码如下:

刚进入该组件时,便会进入beforeRouteEnter,在此先赋值:

beforeRouteEnter(to,from,next){
 global.beforeRouteName = from.name; //给全局变量赋值
 next();
},

然后在mounted里面判断浏览器是否支持popstate。

mounted(){
 //判断浏览器是否支持popstate
 if(window.history && window.history.pushState){
  history.pushState(null,null,document.URL);
  window.addEventListener('popstate',this.goBack,false);
 }
}

其次在methods里面写goBack方法,代码如下:

goBack(){
 if(global.beforeRouteName == "C"){  //判断,当获取上个页面进来的路由是C的时候,返回到A页面
  this.$router.push({name:'A'}); 
 }else if(global.beforeRouteName == "E"){  //判断,当获取上个页面进来的路由是E的时候,返回上一页
  history.go(-1);
 }else{
  this.$router.push({name:'A'}); //判断,当有其他返回值的时候,默认返回到A页面(这个随意设置,一般不会有这种情况)
 }
}

最后一定不要忘记:在destroyed要取消监听,不然这个监听一直存在,代码如下:

destroyed(){
 window.removeEventListener('popstate',this.goBack,false);
}

到此需求4就解决了。

刚刚看了下代码,其实路由守卫做这个返回控制其实更简单。只要好好使用beforeRouteLeave这个守卫就能简单解决以上问题

补充知识:vue 使用路由守卫监听返回键,控制页面跳转

我就废话不多说了,大家还是直接看代码吧~

beforeRouteLeave(to, from, next) {
 // 导航离开该组件的对应路由时调用
 // 可以访问组件实例 `this`
 if(!this.isPublish){
  this.confirmVisible=true
  next(false)//不放行
 }else {
  next()
 } 
},

总结

学好vue路由是最基本的,所以大家一定要精通哟,如有任何问题都可以进QQ群咨询。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vue20200826a34.html

网友评论文明上网理性发言 已有0人参与

发表评论: