1、vue router 的入门案例

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.     </style>
  11.     <script src="./lib/vue.js"></script>
  12.     <script src="./lib/vue-router.js"></script>
  13.     <script>
  14.         window.onload = function () {
  15.             let rout = new VueRouter({
  16.                 routes: [
  17.                     //传参时,注意是$route.params
  18.                     {
  19.                         path: '/user/:id', component: {
  20.                             template: '<div>this is user,id is {{$route.params.id}}</div>',
  21.                             beforeRouteUpdate(to, from, next) {
  22.                                 console.log('to:', to);
  23.                                 console.log(from);
  24.                                 //如果没有next(),那么就不会往下走
  25.                                 next();
  26.                             }
  27.                         }
  28.                     }
  29.                 ]
  30.             });
  31.  
  32.             let VM = new Vue({
  33.                 el: '#container',
  34.                 router: rout,
  35.                 methods: {
  36.                     forward() {
  37.                         //前进
  38.                         this.$router.go(1);
  39.                     },
  40.                     backward() {
  41.                         //后退
  42.                         this.$router.go(-1);
  43.                     },
  44.                     push() {
  45.                         //跳转
  46.                         this.$router.push('/user/111');
  47.                     }
  48.                 }
  49.             })
  50.         }
  51.     </script>
  52. </head>
  53. <body>
  54. <div id="container">
  55.     <input type="button" value="前进" @click="forward">
  56.     <input type="button" value="后退" @click="backward">
  57.     <input type="button" value="跳转" @click="push"><br/>
  58.     <router-link to="/user/111">user111</router-link>
  59.     <router-link to="/user/222">user222</router-link>
  60.     <router-link to="/user/333">user333</router-link>
  61.     <router-view></router-view>
  62. </div>
  63. </body>
  64. </html>

注意：在vuerouter里面用的component未必要在vue里面注册组件，可以独立的存在

2、子路由的使用

　　a、子路由使用一 => 在路由页面里面定义子路由

  1. <body>
  2. <div id="container">
  3.     <router-link to="/">first</router-link>
  4.     <router-link to="/second">second</router-link>
  5.     <router-view></router-view>
  6. </div>
  7. <template id="first">
  8.     <div>
  9.         <h1>this is first</h1>
  10.         <!--在这个子路由里面用的就是二级路径而不是全路径-->
  11.         <router-link to="/">aaa</router-link>
  12.         <router-link to="/bbb">bbb</router-link>
  13.         <router-view></router-view>
  14.     </div>
  15. </template>
  16. <script src="./vue.js"></script>
  17. <script src="./vue-router.js"></script>
  18. <script>
  19. let first = {
  20.     template: '#first'
  21. };
  22. let second = {
  23.     template: '<div>this is second</div>'
  24. };
  25. let fourth = {
  26.     template: '<div>this is fourth</div>'
  27. };
  28. let fifth = {
  29.     template: '<div>this is fifth</div>'
  30. };
  31. let routes = [
  32.     {
  33.         path: '/',
  34.         component: first,
  35.         children: [                 //注意子路由里面children接收的是一个数组，并且里面的子路由不能够带'/'符号
  36.             {path:'', component: fourth},
  37.             {path: 'bbb', component: fifth}
  38.         ]
  39.     },
  40.     {path: '/second', component: second}
  41. ];
  42. let router = new VueRouter({
  43.     routes
  44. });
  45. let app = new Vue({
  46.     el: '#container',
  47.     router
  48. });
  49. </script>
  1. export default [
  2.     {
  3.         path: '/',
  4.         name: 'home',
  5.         component: Home
  6.     },
  7.     {
  8.         path: '/about',
  9.         name: 'about',
  10.         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  11.     },
  12.     {
  13.         path: '/check',
  14.         component: check,
  15.         redirect: '/second',
  16.         children: [
  17.             { path: '/first', component: first },
  18.             { path: '/second', component: second }
  19.         ]
  20.     }
  21. ]

　　　b、子路由的使用二  => 在路由页面外面定义子路由标签

  1. <body>
  2. <div id="container">
  3.     <router-link to="/first">first</router-link>
  4.     <router-link to="/first/aaa">aaa</router-link>      <!--页面会转到first页面下的aaa标签，注意这里的写法-->
  5.     <router-link to="/first/bbb">bbb</router-link>      <!--页面会转到first页面下的bbb标签，注意这里的写法-->
  6.     <router-link to="/second">second</router-link>
  7.     <router-view></router-view>
  8. </div>
  9. <template id="first">
  10.     <div>
  11.         <h1>this is first</h1>
  12.         <router-view></router-view>
  13.     </div>
  14. </template>
  15. <script src="./vue.js"></script>
  16. <script src="./vue-router.js"></script>
  17. <script>
  18. let first = {
  19.     template: '#first'
  20. };
  21. let second = {
  22.     template: '<div>this is second</div>'
  23. };
  24. let fourth = {
  25.     template: '<div>this is fourth</div>'
  26. };
  27. let fifth = {
  28.     template: '<div>this is fifth</div>'
  29. };
  30. let routes = [
  31.     {
  32.         path: '/first',
  33.         component: first,
  34.         children: [                 //注意子路由里面children接收的是一个数组，并且里面的子路由不能够带'/'符号
  35.             {path:'aaa', component: fourth},
  36.             {path: 'bbb', component: fifth}
  37.         ]
  38.     },
  39.     {path: '/second', component: second}
  40. ];
  41. let router = new VueRouter({
  42.     routes
  43. });
  44. let app = new Vue({
  45.     el: '#container',
  46.     router
  47. });
  48. </script>
  49. </body>

3、路由参数的传递

路由接收参数需要用到$route，注意这里是$route而不是$router;

  1. <body>
  2. <div id="container">
  3. <!--    <router-link to="/first">first</router-link>传参可以用以下的写法-->
  4.     <router-link :to="{name: 'aaa', params: {username: 'AAA', id: 123}}">first</router-link>
  5.     <!--接收相应的数据用$route.name, $route.params.username或者$route.params.id-->
  6.     <router-link to="/second">second</router-link>
  7.     <router-view></router-view>
  8. </div>
  9. <script src="./vue.js"></script>
  10. <script src="./vue-router.js"></script>
  11. <script>
  12. let first = {
  13.     template: '<div>this is first content--{{$route.params.username}}---{{$route.params.id}} <input type="button" value="btn" @click="check"></div>',
  14.     methods: {
  15.         check() {
  16.             console.group('相应的参数');
  17.             console.log(this.$route.params.username, this.$route.params.id); //注意这里的this.$route要和this.$router区分开
  18.             console.groupEnd();
  19.         }
  20.     }
  21. };
  22. let second = {
  23.     template: '<div>this is second content</div>'
  24. };
  25. let routes = [
  26.     {path: '/first', name: 'aaa', component: first},
  27.     {path: '/second', name: 'bbb', component: second}
  28. ];
  29. let app = new Vue({
  30.     el: '#container',
  31.     router: new VueRouter({routes})
  32. });
  33. </script>
  34. </body>

通过url进行传值

  1. <body>
  2. <div id="container">
  3.     <router-link to="/first/haha/123">first</router-link>
  4.     <router-link to="/second/yes/111">second</router-link>
  5.     <router-view></router-view>
  6. </div>
  7. <script src="./vue.js"></script>
  8. <script src="./vue-router.js"></script>
  9. <script>
  10. let first = {
  11.     template: '<div>this is first content, str的值为{{$route.params.str}}, id的值为{{$route.params.id}}</div>',
  12. };
  13. let second = {
  14.     template: '<div>this is second content</div>'
  15. };
  16. let routes = [
  17.     {path: '/first/:str/:id(\\d+)', name: 'aaa', component: first},   //当地址不完全匹配的时候不显示，只有完全匹配的时候会显示 #/first/haha/34
  18.     {path: '/second/:str/:id', name: 'bbb', component: second}        //如果需要添加正则匹配的时候，可以用(\\d+)或者其他方式进行添加
  19. ];
  20. let app = new Vue({
  21.     el: '#container',
  22.     router: new VueRouter({routes})
  23. });
  24. </script>
  25. </body>

 通过组件传值的方式传值

  1. {
  2.     path: '/check',
  3.     component: check,
  4.     // redirect: '/first/yf',
  5.     children: [
  6.         { path: '/first/:name', name: 'first', component: first },
  7.         { path: '/second', component: second }
  8.     ],
  9.     // props: true      // 方式一　　　　这种情况假如路由下是/check/:name， 那么会自动的把name进行组件传值的
  10.     // props: {         // 方式二
  11.     //     name: 'test'
  12.     // },
  13.     props: route => {   // 方式三
  14.         return { name: 'check' }
  15.     }
  16. }

那么接收和组件的接收方式是一样的， 在路由的view中写如下代码进行接收

  1. export default {
  2.     props: {
  3.         name: {
  4.             type: String,
  5.             default: ''
  6.         }
  7.     },
  8.     methods: {
  9.         getName () {
  10.             console.log(this.name);
  11.         }
  12.     }
  13. }

路由中还可以定义meta进行传值

4、单页面多路由区域

多个路由区域是指存在多个router-view的时候需要在router-view上声明name

  1. <body>
  2. <div id="container">
  3.     <router-link :to="{name: 'aaa'}">first</router-link>
  4.     <router-link :to="{name: 'bbb'}">second</router-link>
  5.     <router-view></router-view>
  6.     <router-view name="part"></router-view>     <!--存在多个router-view的时候要指定name-->
  7.     <router-view name="block"></router-view>
  8. </div>
  9. <script src="./vue.js"></script>
  10. <script src="./vue-router.js"></script>
  11. <script>
  12. let first = {
  13.     template: '<div>this is first content</div>',
  14. };
  15. let second = {
  16.     template: '<div>this is second content</div>'
  17. };
  18. let routes = [
  19.     {path: '/first', name: 'aaa', components: {
  20.             default: first,             //指定默认的router-view的组件,即没有声明name的router-view
  21.             part: second,               //指定名字为part的router-view的组件
  22.             block: first                //指定名字为block的router-view的组件
  23.         }
  24.     },
  25.     {path: '/second', name: 'bbb', components: {
  26.             default: second,
  27.             part: first,
  28.             block: second
  29.         }
  30.     }
  31. ];
  32. let app = new Vue({
  33.     el: '#container',
  34.     router: new VueRouter({routes})
  35. });
  36. </script>
  37. </body>

 注意，当存在多个router-view的时候，里面的component需要转变为components

 5、路由的重定向

正常的重定向，可以在route里面加配redirect这个配置，如果需要动态调用，可以用$router.push(路由)，具体例子如下：

  1. <body>
  2. <div id="container">
  3.     <router-link to="/first/haha/123">first</router-link>
  4.     <router-link to="/second/yes/111">second</router-link>
  5.     <router-view></router-view>
  6. </div>
  7. <script src="./vue.js"></script>
  8. <script src="./vue-router.js"></script>
  9. <script>
  10. let first = {
  11.     template: '<div>this is first content, str的值为{{$route.params.str}}, id的值为{{$route.params.id}}</div>',
  12. };
  13. let second = {
  14.     template: '<div>this is second content <input type="button" value="btn" @click="check"></div>',
  15.     methods: {
  16.         check() {
  17.             this.$router.push('/first/haha/111', function(router) {
  18.                 console.log(arguments);         //动态的转到某个路由上，可以用push这个方法
  19.             });
  20.         }
  21.     }
  22. };
  23. let routes = [
  24.     {path: '/first/:str/:id(\\d+)', name: 'aaa', component: first},
  25.     {path: '/second/:str/:id', name: 'bbb', component: second, redirect: '/first/yu/111'},        //如果需要添加正则匹配的时候，可以用(\\d+)或者其他方式进行添加
  26.     // {path: '/second/:str/:id', name: 'bbb', component: second, redirect: {name: 'aaa', params: {str: 'get', id: 111}}}        //如果需要添加正则匹配的时候，可以用(\\d+)或者其他方式进行添加
  27. ];
  28. let app = new Vue({
  29.     el: '#container',
  30.     router: new VueRouter({routes})
  31. });
  32. </script>
  33. </body>

 6、alias 别名的用法

  1. <body>
  2. <div id="container">
  3.     <router-link to="/">first</router-link>
  4.     <router-link :msg=msg to="/bill">bill</router-link> <!--利用别名进行跳转-->
  5.     <router-link :msg=msg to="/haha">second</router-link>
  6.     <router-view></router-view>
  7. </div>
  8. <script src="./vue.js"></script>
  9. <script src="./vue-router.js"></script>
  10. <script>
  11. let first = {
  12.     template: '<div>this is first content, str的值为{{$route.params.str}}, id的值为{{$route.params.id}}</div>',
  13. };
  14. let second = {
  15.     template: '<div>this is second content</div>',
  16. };
  17. let routes = [
  18.     {path: '/', name: 'aaa', component: first, alias: '/haha'},
  19.     {path: '/second', name: 'bbb', component: second, alias: '/bill'},  //添加别名后，访问/bill可以跳转到/second这个路径下
  20. ];
  21. let app = new Vue({
  22.     el: '#container',
  23.     data: {
  24.       msg: 'this is msg'
  25.     },
  26.     router: new VueRouter({routes})
  27. });
  28. </script>
  29. </body>

 7、路由过渡动画

添加路由的过渡动画需要在router-view外层包一层的transition标签，如下例：

  1. <style>
  2.    .fade-enter {            /*进入过渡的开始状态，元素插入时生效，只应用一帧后立刻删除*/
  3.        opacity: 0;
  4.    }
  5.     .fade-enter-active {     /*进入过渡的结束状态，元素插入时生效，在过渡过程完成后删除*/
  6.         transition: opacity 0.5s;
  7.     }
  8.     .fade-leave {            /*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
  9.         opacity: 1;
  10.     }
  11.     .fade-leave-active {     /*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
  12.         opacity: 0;
  13.         transition: opacity 0.5s
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="container">
  19.     <router-link to="/first">first</router-link>
  20.     <router-link to="/second">second</router-link>
  21.     <transition name="fade" mode="out-in">  <!--默认的mode是in-out表示进入后，再删除-->
  22.         <router-view></router-view>
  23.     </transition>
  24. </div>
  25. <script src="./vue.js"></script>
  26. <script src="./vue-router.js"></script>
  27. <script>
  28. let first = {
  29.     template: '<div>this is first content</div>',
  30. };
  31. let second = {
  32.     template: '<div>this is second content</div>',
  33. };
  34. let routes = [
  35.     {path: '/first', name: 'aaa', component: first},
  36.     {path: '/second', name: 'bbb', component: second},
  37. ];
  38. let app = new Vue({
  39.     el: '#container',
  40.     data: {
  41.       msg: 'this is msg'
  42.     },
  43.     router: new VueRouter({routes})
  44. });
  45. </script>
  46. </body>

 8、history模式与配置404页面

a、在配置路由后，访问路由的时候，在地址栏中会显示#相当符号，那么为了美观，可以选择另外一种显示方式history, router里的模式有hash与history,默认是hash

b、如果访问了未知页面，为了友好的用户体验，可以配置404页面

  1. <body>
  2. <div id="container">
  3.     <router-link to="/first">first</router-link>
  4.     <router-link to="/second">second</router-link>
  5.     <router-view></router-view>
  6. </div>
  7. <script src="./vue.js"></script>
  8. <script src="./vue-router.js"></script>
  9. <script>
  10. let first = {
  11.     template: '<div>this is first content</div>',
  12. };
  13. let second = {
  14.     template: '<div>this is second content</div>',
  15. };
  16. let error = {
  17.     template: '<div>404, 没有找到相关的页面</div>'
  18. };
  19. let routes = [
  20.     {path: '/first', name: 'aaa', component: first},
  21.     {path: '/second', name: 'bbb', component: second},
  22.     {path:'*', component: error}            //配置404页面的时候，path为*号
  23. ];
  24. let app = new Vue({
  25.     el: '#container',
  26.     data: {
  27.       msg: 'this is msg'
  28.     },
  29.     router: new VueRouter({mode:'history', routes})         //注意使用history必需要在服务器的环境下进行配置，否则会报错
  30. });
  31. </script>
  32. </body>

9、路由中的钩子函数

有两种方式：一种方式，在component里面进行写beforeRouterEnter, beforeRouterLeave, 第二种方式， 在route里面定义相当的方法 beforeEnter,例子如下：

  1. <body>
  2. <div id="container">
  3.     <router-link to="/first">first</router-link>
  4.     <router-link to="/second">second</router-link>
  5.     <router-view></router-view>
  6. </div>
  7. <script src="./vue.js"></script>
  8. <script src="./vue-router.js"></script>
  9. <script>
  10.     let first = {
  11.         template: '<div>this is first content</div>',
  12.     };
  13.     let second = {
  14.         template: '<div>{{msg}}</div>',
  15.         data: function() {
  16.             return {
  17.                 'msg': 'this is second content'
  18.             }
  19.         },
  20.         //方法一， 写在component里面可以触发相应的钩子
  21.         beforeRouteEnter(to, from, next){
  22.             console.log('beforeRouteEnter', arguments);
  23.             next()
  24.         },
  25.         beforeRouteLeave(to, from ,next) {
  26.             console.log('beforeRouteLeave', arguments);
  27.             next()
  28.         }
  29.     };
  30.     //方法二：在router里面写钩子
  31.     let routes = [
  32.         {
  33.             path: '/first', name: 'aaa', component: first, beforeEnter(to, from, next) {
  34.                 //to表示来的路由，from表示目标路由，next表示执行跳转的函数
  35.                 next();             //next表示执行跳转的动作，next里面接收一个参数，如果是true表示执行跳转，如果是false则表示不跳转
  36.             }
  37.         },
  38.         {path: '/second', name: 'bbb', component: second},
  39.     ];
  40.     let app = new Vue({
  41.         el: '#container',
  42.         data: {
  43.             msg: 'this is msg'
  44.         },
  45.         router: new VueRouter({mode: 'hash', routes})         //注意使用history必需要在服务器的环境下进行配置，否则会报错
  46.     });
  47. </script>
  48. </body>

beforeEach可以做登录页面的跳转  router.beforeEach() => {},     next()的括号里可以传boolean 也可以传string, 也可以传route对象实例，如{ name: 'home' } 等

  1. let router = new VueRouter({ routes });
  2. router.beforeEach((to, from, next) => {
  3.     if (to.name === 'about') {
  4.         next({ name: 'home' })
  5.     } else {
  6.         next();
  7.     }
  8. })
  9. export default router;

10、编程式导航

  1. <body>
  2. <div id="container">
  3.     <div>
  4.         <input type="button" value="前进" @click="forward">
  5.         <input type="button" value="后退" @click="back">
  6.         <input type="button" value="向后跳2" @click="skip">
  7.         <input type="button" value="回首页" @click="gohome">
  8.     </div>
  9.     <router-link to="/first">first</router-link>
  10.     <router-link to="/second">second</router-link>
  11.     <router-view></router-view>
  12. </div>
  13. <script src="./vue.js"></script>
  14. <script src="./vue-router.js"></script>
  15. <script>
  16.     let first = {
  17.         template: '<div>this is first content</div>',
  18.     };
  19.     let second = {
  20.         template: '<div>this is second content</div>',
  21.     };
  22.     let routes = [
  23.         {path: '/first', name: 'aaa', component: first},
  24.         {path: '/second', name: 'bbb', component: second},
  25.     ];
  26.     let app = new Vue({
  27.         el: '#container',
  28.         data: {
  29.             msg: 'this is msg'
  30.         },
  31.         methods: {
  32.             forward() {
  33.                 this.$router.forward();     //向前跳转
  34.             },
  35.             back() {
  36.                 this.$router.back();       //向后跳转
  37.             },
  38.             skip() {
  39.                 this.$router.go(-2);      //跳转指定步数
  40.             },
  41.             gohome() {
  42.                 //push的两种写法
  43.                 // this.$router.push('/first').then(() => console.log('完成跳转')).catch(() => console.log('跳转失败')); //如果是replace的话，那么就不会生成记录
  44.                 this.$router.push({name: 'aaa'}, ()=> console.log('ok'), ()=> console.log('no'));
  45.  
  46.             }
  47.         },
  48.         router: new VueRouter({mode: 'hash', routes})
  49.     });
  50. </script>
  51. </body>

 11、如何配置页面刷新

配置redirect的路由

  1.   {
  2.     path: '/redirect',
  3.     component: Layout,       //如有外层框架
  4.     hidden: true,
  5.     children: [
  6.       {
  7.         path: '/redirect/:path*',
  8.         component: () => import('@/views/redirect/index')
  9.       }
  10.     ]
  11.   }

redirect组件内容

  1. <script>
  2. export default {
  3.     created () {
  4.         const { params, query } = this.$route
  5.         const { path } = params
  6.         this.$router.replace({ path: '/' + path, query })
  7.     },
  8.     render: h => h()    //阻止警示信息
  9. }
  10. </script>

跳转：

  1. this.$router.replace({
  2.      path: '/redirect' + fullPath
  3. })

注意：在router-view外围需要配置keep-alive如下

  1. <transition name="fade-transform" mode="out-in">
  2.     <keep-alive :include="cachedViews">
  3.          <router-view :key="key"></router-view>
  4.     </keep-alive>
  5. </transition>

注意： keep-alive中有两个参数，include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

exclude优先级大于include，例子中的cachedViews的类型是Array<string>

  1. <keep-alive include="test-keep-alive">
  2.   <!-- 将缓存name为test-keep-alive的组件 -->
  3.   <component></component>
  4. </keep-alive>
  5.  
  6. <keep-alive include="a,b">
  7.   <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  8.   <component :is="view"></component>
  9. </keep-alive>
  10.  
  11. <!-- 使用正则表达式，需使用v-bind -->
  12. <keep-alive :include="/a|b/">
  13.   <component :is="view"></component>
  14. </keep-alive>
  15.  
  16. <!-- 动态判断 -->
  17. <keep-alive :include="includedComponents">
  18.   <router-view></router-view>
  19. </keep-alive>
  20.  
  21. <keep-alive exclude="test-keep-alive">
  22.   <!-- 将不缓存name为test-keep-alive的组件 -->
  23.   <component></component>
  24. </keep-alive>

 include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

也就相当于先匹配components里的name名字，所以取名的时候尽量与与过滤的一致

vue 的router的简易运用的更多相关文章

  1. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  2. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  3. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  4. vue 中router.go；router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  5. 【vue】 router.beforeEach

    import store from '@/store' const Vue = require('vue') const Router = require('vue-router') Vue.use( ...

  6. vue & this.$router.resolve

    vue & this.$router.resolve gotoAutoUpdate (query = {}) { const { href } = this.$router.resolve({ ...

  7. Vue中router路由的使用、router-link的使用（在项目中的实际运用方式）

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  8. vue中$router.push打开新窗口

    在vue中使用 this.$router.push({ path:  '/home' }) 默认是替代本窗口 如果想新开一个窗口,可以使用下面的方式: let routeData = this.$ro ...

  9. vue之router钩子函数

    模块一:全局导航钩子函数 1.vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每 ...

随机推荐

  1. 顶层const

    顶层const:指针本身是一个常量 底层const:指针所指对象是一个常量 顶层const可以表示任意的对象是常量,这一点对任何数据类型都适用,如算术类型.类.指针等 底层const则与指针和引用等复 ...

  2. 存在Settings数据在手机系统中的位置

    旧版本Android,将settings数据存在数据库中,{system, secure, global} 对应的是 /data/data/com.android.providers.settings ...

  3. Django中的信号基础知识

    Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. 1.Django内置信号 1 2 3 4 5 6 7 8 9 10 ...

  4. 超级简单的Android Studio jni 实现(无需命令行)【转载】

    原文: http://www.jianshu.com/p/e689d0196a17 1.配置Anroid Studio(这步是关键) 使用[command+,] 打开Preferences,选择Ext ...

  5. 升级Jenkins版本

    找到jenkins.war文件的安装目录 cd /usr/local/tomcat/tomcat1_jenkins/webapps/ 停止jenkins service tomcat_jenkins ...

  6. 关于第一个java程序HelloWorld的感慨

    今天入手第一个java程序,严格意义上来讲,是真正开始研究java的第一个“Hello World": 1.没有用自动提示,虽然System.out.println()还是自动蹦出来了,但是 ...

  7. 1、git基础介绍及远程/本地仓库、分支

    1. Git基础介绍 基于Git进行开发时,首先需要将远程仓库代码clone到本地,即为本地仓库.后续大部分时间都是基于本地仓库上的分支进行编码,最后将本地仓库的代码合入远程仓库. 1.1. 远程仓库 ...

  8. LabVIEW---vi图标和符号的制作

    前言: 使用图形化设计语言进行开发时候,为VI添加说明的一个重要的方法是为其建立一个形象的图标,每个VI都在前面板后程序框图的右上角有一个图标,它是VI的图形化表示.如果VI当作子VI调用,该图标就会 ...

  9. 让NotePad++添加到右键快捷方式

    添加后的效果图: 操作方式: 第一步:在桌面上新建一个txt文本文档,然后将写入如下内容 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT ...

  10. python 基础 01

    什么是计算机? cpu: 计算机的大脑; 读写速度 3GHZ 内存: (为了提高利用率) 缓冲硬盘和cpu 硬盘: 机械硬盘读写速度70mb/s 计算机里面读写的内容都是01代码 二进制(计算机只认二 ...