vue router 路由组件
vue 2017-11-13 13:27:15

按需加载，头和底，可根据页面需求，是否统一显示头和底：

JavaScript Code复制内容到剪贴板
  1. import Vue from 'vue'  
  2. import Router from 'vue-router'  
  3.   
  4. import AppHeader from '@/components/common/Header.vue'  
  5. import AppFooter from '@/components/common/Footer.vue'  
  6.   
  7. import publishIndex from '@/components/cms/publishIndex' // 发布首页的页面.  
  8. import publishBase from '@/components/cms/publishBase' // 必填项  
  9.   
  10. //按需加载  
  11. const userIndex = r => require.ensure([], () => r(require('../components/user/index')), 'userIndex') //首页  
  12.   
  13.   
  14. export default new Router({  
  15.     routes: [{  
  16.             path: '/',  
  17.             name: 'userIndex',  
  18.             components: {  
  19.                 header: AppHeader,  
  20.                 main: userIndex,  
  21.                 footer: AppFooter  
  22.             }  
  23.         },  
  24.         {  
  25.             path: '/cms/index',//用户发布首页，选择类型  
  26.             name: 'publish',  
  27.             components: {  
  28.                 header: AppHeader,  
  29.                 main: publishIndex,  
  30.                 footer: AppFooter  
  31.             }  
  32.         },  
  33.         {  
  34.             path: '/cms/publish-base/:type/:fee', //填写必要信息，type 发布类型，fee是否付费，1不限，2免费  
  35.             name: 'publishBase',  
  36.             components: {  
  37.                 header: AppHeader,  
  38.                 main: publishBase  
  39.             }  
  40.         },  
  41.     ]  
  42. })  

 

如果全部都有头和底则可以直接写成：

JavaScript Code复制内容到剪贴板
  1. export default new Router({  
  2.     routes: [{  
  3.             path: '/',  
  4.             name: 'Main',  
  5.             component: Main  
  6.         },  
  7.     ]  
  8. })  

 

 

在路由中传参，如type，fee

1、在组件中获取传参的值 ：

路由：

JavaScript Code复制内容到剪贴板
  1. {  
  2.     path: '/msg/message-detail/:id',  
  3.     components: {  
  4.         main: messageDetail,  
  5.         footer: AppFooter  
  6.     }  
  7. },  

 

 

在compoents中获取路由上的参数：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.   
  3. let publishId = this.$route.params.id;  
  4.   
  5. </script>  

 

在模板中使用： 

JavaScript Code复制内容到剪贴板
  1. $route.params.id  

 

如果是router跳转，要注册，params，不能和path组合，只能和name

JavaScript Code复制内容到剪贴板
  1. router.push(  
  2.     {  
  3.       name: 'memberTaskDetail',  
  4.       params: { id: 1 }  
  5.     }  
  6. )  

 

 

2、在路由上直接添加参数：

XML/HTML Code复制内容到剪贴板
  1. @click="toRouter({path: '/course/lesson-hour',query: {lessonId: item.lessonId}})"  
  2.   
  3.   
  4.         methods: {  
  5.             toRouter(router) {  
  6.                 this.$router.push(router);  
  7.             },  

取值，模板中取：

JavaScript Code复制内容到剪贴板
  1. $route.query.lessonId  

 

如果这个传递的参数，可有可无，可使用？：

JavaScript Code复制内容到剪贴板
  1. { //新增/修改课时，带id过来    
  2.     path: '/course/lesson-edit/:id?',    
  3.     name: 'addLesson',    
  4.     components: {    
  5.         main: addLesson    
  6.     }    
  7. },    

表示 ，这个id是不确定的，可以有 也可以不要

 

 

路由组件，返回上一页：

JavaScript Code复制内容到剪贴板
  1. this.$router.go(-1);  

 如果直接在模块中写：

XML/HTML Code复制内容到剪贴板
  1. <button @click="$router.back(-1)">上一步</button>  

 

 

 

跳转指定路由：

JavaScript Code复制内容到剪贴板
  1. let id = res.publishId;  
  2.                         this.$router.push('/cms/publish-more/' + id);  

 

 

 

获取当前路由：

JavaScript Code复制内容到剪贴板
  1. console.log(this.$route.path);  

 

页面重新加载 / 重新渲染页面

JavaScript Code复制内容到剪贴板
  1. this.$router.replace('user/index');  

 

 

 

美化路由，将#号去掉，路由开始history模式：

这里的base表示请求的url根路径的配置

JavaScript Code复制内容到剪贴板
  1. export default new Router({  
  2. mode: 'history',  
  3. base:'/test/',  

 

 

同一个路由，不同参数跳转，页面无变化的解决方法：

JavaScript Code复制内容到剪贴板
  1. mounted: function() {  
  2.     this.init();  
  3. },  
  4. watch: {  
  5.       '$route' (to, from) {  
  6.         //刷新参数放到这里里面去触发就可以刷新相同界面了  
  7.         this.init(this.$route.path);  
  8.       }  
  9. },  
  10. methods: {  
  11.     init(urlStr) {  
  12.         if(urlStr){  
  13.             let urlStrArr = urlStr.split('/');  
  14.             this.lessonId = urlStrArr[urlStrArr.length - 2];  
  15.             this.playerShow = false;  
  16.         }  

 

参考：https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html 

 

关于跳转路由，受前后浏览页面影响，页面总会跑到中间或其他浏览位置：

JavaScript Code复制内容到剪贴板
  1. router.beforeEach((to, from, next) => {  
  2.   window.scrollTo(0, 0);  
  3.   next();  
  4. })  

 

在main.js中应该是用import引入的router，在引入router之后配置即可

 

设置将要去往的路由匹配：

JavaScript Code复制内容到剪贴板
  1. const paths = [  
  2.     "userGuide",  
  3.     "userGuide01",  
  4.     "userGuide02",  
  5.     "userGuide03",  
  6.     "userGuide04",  
  7. ]  
  8. // 将要前往的页面中，需要从头开始显示，不记录中间位置  
  9. router.beforeEach((to, from, next) => {  
  10.     if(global.contains(paths,to.name)){  
  11.         window.scrollTo(0, 0);  
  12.     }  
  13.     next();  
  14. })  

 

JavaScript Code复制内容到剪贴板
  1. contains(arr, obj) {  
  2.   // 当前值 是否在指定数组内  
  3.   var i = arr.length;  
  4.   while (i--) {  
  5.             // console.log(typeof(arr[i]));  
  6.             // console.log(typeof(obj));  
  7.     if (arr[i] === obj) {  
  8.       return true;  
  9.     }  
  10.   }  
  11.   return false;  
  12. },  

 

 

参考：https://router.vuejs.org/en/advanced/navigation-guards.html#global-guards

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/201.html

上一篇 mint-ui MessageBox
下一篇 vue 表单验证
相关的文章
Powered by yoyo苏ICP备15045725号