Vue.js之vue-router路由

vue学习的一系列，全部来自于表哥---表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206

1概述

vue-router是vue的一个库，可以快速的开发一个单页应用；

在导航切换时，页面根本就不刷新，没有整页刷新的概念，所以用户的输入可以被保留下来，不丢失状态，不丢失数据；

不用每切换一次导航就重新拉取一遍数据，只需要取一次数据，就可以一直用；

在网页上最频烦的操作就是点点点，这样页面不刷新，就可以极大的节省前端和后端的资源。

2安装和基本配置

引用vue文件和vue-router的库文件，https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js

例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

配置说明：

定义一个数组rounts，数组中的每一项都是一个配置，path代表路由的地址，/就表示首页（默认页）；可以直接传进一个component，这个component和普通的component一样，该有的功能都可以用；

然后把定义的规则传给构造的路由，var router=new VueRouter();定义一个routes，把数组传给它就可以了；

在new Vue中加一个router属性，把定义的构造器router传进去；

html中，要加一个标签router-link，用to指定地址，再用router-view表示显示的视图，它显示的就是template中定义的内容

3传参及获取传参

vue-router中传参有两种方式，

第一种，User后面加个冒号：/user/:name，在template中通过{{$route.params.name}}来获取。

例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由-传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <!-- <p>我今年{{$route.query.age}}岁</p> -->

                    </div>

                    `

                }

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

第二种，通过query，就是地址后面跟着?这样，例如：

http://127.0.0.1:8848/vuetest.html?age=20#/，在template中把params换成query就可以了，{{$route.query.age}}

例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由-传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <p>我今年{{$route.query.age}}岁</p>

                    </div>

                    `

                }

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

4子路由

在上面例子的基础上，想实现“大美女”后面加个/more，就是嵌套的路由，

再加一个children的配置项，代表子路由，也是一个数组，写法和父级的rounts一样，path可以写成more，传参写法也一样，$route.params.name。

然后在父级路由添加链接<router-link>，这里的to的写法有两种方式：

一种是用v-bind，中间动态的部分就用传参的形式写，

:to="'/user/'+$route.params.name+'/more'"，就类似这样的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由-传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <router-link :to="'/user/'+$route.params.name+'/more'">更多</router-link>

                           <router-view></router-view>

                    </div>

                    `

                },

                children:[{

                    path:'more',

                    component:{

                        template:`

                    <div>

                        用户 {{$route.params.name}} 的详细信息:内容内容在这里写很多...

                    </div>

                    `

                    }

                }

                ]

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

另一种比较简洁，to的值直接写成more，然后给router-link加个属性append，表示追加的意思，这样就是在原来的后面加上一个more了，但是这种写法只能点击一次，再点“更多”，就又会多追加一个/more

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由-传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <router-link to="more" append>更多</router-link>

                           <router-view></router-view>

                    </div>

                    `

                },

                children:[{

                    path:'more',

                    component:{

                        template:`

                    <div>

                        用户 {{$route.params.name}} 的详细信息:内容内容在这里写很多...

                    </div>

                    `

                    }

                }

                ]

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

5手动访问和传参

5.1手动访问

想实现，点击某个按钮，button，加个点击事件，每隔一秒去访问一个链接，这样用户只点一次，就自动访问设置的链接了，使用this.router.push，push这个接口就是专门用来访问某个链接的，写在push中的链接就被推到了历史记录中，

例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>手动访问和传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

                <button @click="surf">漫游</button>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <router-link to="more" append>更多</router-link>

                           <router-view></router-view>

                    </div>

                    `

                },

                children:[{

                    path:'more',

                    component:{

                        template:`

                    <div>

                        用户 {{$route.params.name}} 的详细信息:内容内容在这里写很多...

                    </div>

                    `

                    }

                }

                ]

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router,

            methods:{

                surf:function(){

                    setTimeout(function(){

                        this.router.push('/about');

                        setTimeout(function(){

                            this.router.push('/user/大美女');

                        },2000);

                    },2000);

                }

            }

        })

    </script>

</html>

这种手动触发的方式，虽然比较麻烦，但能做到更细粒度的控制，做出来的功能可以很强大，

router-link方式更方便简单，多数情况下还是用router-link

5.2手动传参

在push中直接传一个对象，{name:’user’}，这里的name指的是路由的名称，是在上面写规则那里指定的name,

然后传参可以写在params里，也是一个对象params:{name:'大美女'}

完整示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>手动访问和传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/about">关于</router-link>

                <router-link to="/user/大美女">大美女</router-link>

                <router-link to="/user/小东西">小东西</router-link>

                <button @click="surf">漫游</button>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/about',

                component:{

                    template:`

                    <div><h1>关于</h1></div>

                    `

                }

            },

            {

                path:'/user/:name',

                name:'user',

                component:{

                    template:`

                    <div>

                        <p>我叫{{$route.params.name}}</p>

                        <router-link to="more" append>更多</router-link>

                           <router-view></router-view>

                    </div>

                    `

                },

                children:[{

                    path:'more',

                    component:{

                        template:`

                    <div>

                        用户 {{$route.params.name}} 的详细信息:内容内容在这里写很多...

                    </div>

                    `

                    }

                }

                ]

            }

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router,

            methods:{

                surf:function(){

                    setTimeout(function(){

                        this.router.push('/about');

                        setTimeout(function(){

                            this.router.push({

                                name:'user',

                                params:{

                                    name:'大美女'

                                }

                            });

                        },2000);

                    },2000);

                }

            }

        })

    </script>

</html>

6命名视图

如果页面中有两个router-view，可以用name属性进行区分，

然后写rounts时，把原来的component换成components，也是一个对象，键就是name，值又是一个对象，在对象里面定义template，例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>路由-传参</title>

    </head>

    <body>

        <div id="app">

            <div>

                <router-link to="/">首页</router-link>

                <router-link to="/user">用户管理</router-link>

                <router-link to="/post">文章管理</router-link>

            </div>

            <div>

                <router-view></router-view>

                <router-view name="sidebar"></router-view>

                <router-view name="content"></router-view>

            </div>

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script src="js/vue-router.js"></script>

    <script>

        var rounts=[

            {

                path:'/',

                component:{

                    template:`

                    <div><h1>首页</h1></div>

                    `

                }

            },

            {

                path:'/user',

                components:{

                    sidebar:{

                        template:`

                        <div>

                            <ul>

                                <li>用户1</li>

                                <li>用户2</li>

                            </ul>

                        </div>

                        `

                    },

                    content:{

                        template:`

                        <div>

                            内容1在这里...

                        </div>

                        `

                    },

                }

            },

            {

                path:'/post',

                components:{

                    sidebar:{

                        template:`

                        <div>

                            <ul>

                                <li>文章1</li>

                                <li>文章2</li>

                            </ul>

                        </div>

                        `

                    },

                    content:{

                        template:`

                        <div>

                            内容2在这里...

                        </div>

                        `

                    },

                }

            },

        ];

        var router=new VueRouter({

            routes:rounts

        });        

        var app=new Vue({

            el:'#app',

            router:router

        })

    </script>

</html>

想命名多少个router-view都可以，但不建议命名太多，不好维护，一个页面2-5个比较合适。

7导航钩子

状态和权限的检查，最好在路由层面就检查好，该驳回的驳回，该访问的访问，这样节省资源。而不要再到组件级别去检查，因为页面中组件太多。

例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>导航钩子</title>

</head>

<body>

<div id="app">

    <div>

        <router-link to="/">首页</router-link>

        <router-link to="/login">登录</router-link>

        <router-link to="/post">帖子管理</router-link>

    </div>

    <div>

        <router-view></router-view>

    </div>

</div>

<script src="lib/vue.js"></script>

<script src="js/vue-router.js"></script>

<script>

var rounts=[

    {

        path:'/',

        component:{

            template:`

            <h1>首页</h1>

            `

        }

    },

    {

        path:'/login',

        component:{

            template:`

            <h1>登录</h1>

            `

        }

    },

    {

        path:'/post',

        component:{

            template:`

            <h1>帖子管理</h1>

            `

        }

    }

];

var router=new VueRouter({

    routes:rounts

});

var zyx=new Vue({

    el:'#app',

    router:router

});

</script>

</body>

</html>

现在想实现，访问“帖子管理”时，会进行检查，

vue中通过router的实例的一个方法beforeEach实现，

参数说明：

to，表示到哪里去

from，表示从哪里来

next，指定接下来要怎么做：

　　直接next();就是正常执行，

　　如果next(false);那么所有的路由都不工作了，

　　还可以传个地址， next('/login');

例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>导航钩子</title>

</head>

<body>

<div id="app">

    <div>

        <router-link to="/">首页</router-link>

        <router-link to="/login">登录</router-link>

        <router-link to="/post">帖子管理</router-link>

    </div>

    <div>

        <router-view></router-view>

    </div>

</div>

<script src="lib/vue.js"></script>

<script src="js/vue-router.js"></script>

<script>

var rounts=[

    {

        path:'/',

        component:{

            template:`

            <h1>首页</h1>

            `

        }

    },

    {

        path:'/login',

        component:{

            template:`

            <h1>登录</h1>

            `

        }

    },

    {

        path:'/post',

        component:{

            template:`

            <h1>帖子管理</h1>

            `

        }

    }

];

var router=new VueRouter({

    routes:rounts

});

router.beforeEach(function(to,from,next){

    //是否登录

    var logged_in=false;

    //如果没登录并且要访问post

    if(!logged_in && to.path=='/post'){

        //转到登录页

        next('/login');

    }else{

        //正常执行

        next();

    }

});

var zyx=new Vue({

    el:'#app',

    router:router

});

</script>

</body>

</html>

如果logged_in为false，那么点击帖子管理会跳到登录页，为true时才会正常访问

说白了这就是个中间件，也可称为路由的生命周期。

还可以在访问之后进行操作，用router.afterEach，其参数只有to和from，不大常用。因为表示路由已加载完毕，可以真正运行这个路由下的所有组件了，那么就可以在这里发送一些全局的异步请求，写一些业务逻辑。这里面的内容放到组件的生命周期也可以。

例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>导航钩子</title>

</head>

<body>

<div id="app">

    <div>

        <router-link to="/">首页</router-link>

        <router-link to="/login">登录</router-link>

        <router-link to="/post">帖子管理</router-link>

    </div>

    <div>

        <router-view></router-view>

    </div>

</div>

<script src="lib/vue.js"></script>

<script src="js/vue-router.js"></script>

<script>

var rounts=[

    {

        path:'/',

        component:{

            template:`

            <h1>首页</h1>

            `

        }

    },

    {

        path:'/login',

        component:{

            template:`

            <h1>登录</h1>

            `

        }

    },

    {

        path:'/post',

        component:{

            template:`

            <h1>帖子管理</h1>

            `

        }

    }

];

var router=new VueRouter({

    routes:rounts

});

router.beforeEach(function(to,from,next){

    //是否登录

    var logged_in=true;

    //如果没登录并且要访问post

    if(!logged_in && to.path=='/post'){

        //转到登录页

        next('/login');

    }else{

        //正常执行

        next();

    }

});

router.afterEach(function(to,from){

    console.log('to：',to);

    console.log('from：',from);

});

var zyx=new Vue({

    el:'#app',

    router:router

});

</script>

</body>

</html>

8元数据及路由匹配

还是上面的登录的例子，如果帖子管理中还有子路由，地址是/post/article，

如果没有登录，那么“post/”后面所有内容，都是不能访问的，

可以使用to的属性matched，意思是匹配了的路由，

例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>元数据及路由匹配</title>

</head>

<body>

<div id="app">

    <div>

        <router-link to="/">首页</router-link>

        <router-link to="/login">登录</router-link>

        <router-link to="/post">帖子管理</router-link>

    </div>

    <div>

        <router-view></router-view>

    </div>

</div>

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

<script>

var rounts=[

    {

        path:'/',

        component:{

            template:`

            <h1>首页</h1>

            `

        }

    },

    {

        path:'/login',

        component:{

            template:`

            <h1>登录</h1>

            `

        }

    },

    {

        path:'/post',

        component:{

            template:`

            <div>

                <h1>帖子管理</h1>

                <router-link to="article" append>文章一</router-link>

                <router-view></router-view>

            </div>

            `

        },

        children:[

            {

                path:'article',

                component:{

                    template:`<h2>文章一的内容...</h2>`

                }

            }

        ]

    }

];

var router=new VueRouter({

    routes:rounts

});

router.beforeEach(function(to,from,next){

    //是否登录

    var logged_in=false;

    //如果没登录并且要访问post

    if(!logged_in && to.matched.some(function(item){

        return item.path=='/post';

    })){

        //转到登录页

        next('/login');

    }else{

        //正常执行

        next();

    }

});

var zyx=new Vue({

    el:'#app',

    router:router

});

</script>

</body>

</html>

访问/post和/post/article都是跳到登录页

Tips：some方法，

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素，则返回false。

详情：https://www.runoob.com/jsref/jsref-some.html

还有第二种方法，如果页面中有非常多的路由，不可能一个个的都去写匹配，太麻烦，那么可以在路由的配置中来写，可以加一个meta的配置，元数据的意思，可以在meta中自定义一个login_required:true，然后return item.meta.login_required; 这样只要路由加上了这个配置，就能控制登录权限了，不用每一个都去js中判断了。

例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>元数据及路由匹配</title>

</head>

<body>

<div id="app">

    <div>

        <router-link to="/">首页</router-link>

        <router-link to="/login">登录</router-link>

        <router-link to="/post">帖子管理</router-link>

        <router-link to="/test">新加测试</router-link>

    </div>

    <div>

        <router-view></router-view>

    </div>

</div>

<script src="js/vue.js"></script>

<script src="js/vue-router.js"></script>

<script>

var rounts=[

    {

        path:'/',

        component:{

            template:`

            <h1>首页</h1>

            `

        }

    },

    {

        path:'/login',

        component:{

            template:`

            <h1>登录</h1>

            `

        }

    },

    {

        path:'/post',

        meta:{

            login_required:true

        },

        component:{

            template:`

            <div>

                <h1>帖子管理</h1>

                <router-link to="article" append>文章一</router-link>

                <router-view></router-view>

            </div>

            `

        },

        children:[

            {

                path:'article',

                component:{

                    template:`<h2>文章一的内容...</h2>`

                }

            }

        ]

    },

    {

        path:'/test',

        meta:{

            login_required:true

        },

        component:{

            template:`

            <h1>测试</h1>

            `

        }

    }

];

var router=new VueRouter({

    routes:rounts

});

router.beforeEach(function(to,from,next){

    //是否登录

    var logged_in=false;

    //如果没登录并且要访问post

    if(!logged_in && to.matched.some(function(item){

        return item.meta.login_required;

    })){

        //转到登录页

        next('/login');

    }else{

        //正常执行

        next();

    }

});

var zyx=new Vue({

    el:'#app',

    router:router

});

</script>

</body>

</html>

Vue.js之vue-router路由的更多相关文章

js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
Vue.js 相关知识（路由）
1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入v ...
Vue.js随笔二(新建路由+component+添加样式+变量的显示)
创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...
「Vue.js」Vue-Router + Webpack 路由懒加载实现
一.前言当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.结合 Vue ...
hbuilderX创建vue项目之添加router路由（前端萌新）
作为一个刚刚接触前端不久的新人来说,熟悉了一种目录结构或者项目创建方法以后,恨不得一辈子不会变! 可是人要生活,就要工作,既然是打工,当然要满足雇佣者的要求. 今天我来说说 hbuilderX 这个开 ...
学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
vue.js实战——vue元素复用
Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...
vue.js实战——vue 实时时间
created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

随机推荐

TreeView滚动TreeViewItem
今天帮忙修了一个bug, 在拖动TreeViewItem时,需要滚动TreeView向前翻页,或向后翻页. 思路: 1.找到TreeView控件里的ItemsControl 2.找到ItemsCont ...
Ubuntu vim使用
vim安装:apt-get install vim-gtk vim使用:默认启动插入模式,或者按‘I’进入插入模式,退出插入模式按‘esc’,用冒号‘:wq’进行保存退出: 其复制和粘贴是靠鼠标右键中 ...
开源LTE代码分析
跟踪了一个在将开源组织-OpenLTE(将4G通信网络LTE开源),现将自己梳理整理的一些文档Post出来,请有相同兴趣的朋友指点: 一,系统介绍 OpenLTE是一位Mot的工程师在12年发起的一个 ...
linux控制USB的绑定/解绑
linux控制USB的绑定/解绑 http://www.jianshu.com/p/57293f9be558 今天工作中遇到一个问题, 要用代码实现USB的enable和disable. 谷歌了一番, ...
linux中syslog自定义存储路径的方法
方法一: 1. su //切换到root用户下2. cp /etc/sysconfig/rsyslog /etc/sysconfig/rsyslogbak //备份vim /etc/sysconfi ...
eval解析字符串问题
eval(string) 参数描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 复制代码 var str = '{"name&quo ...
js中“||”和“&&”的高级用法
例1:用于赋值&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)|| : 从左往右依次判断,当当前值为false则继续,为tru ...
3dmax————
去掉阴影建模中去掉阴影,有时候阴影会挡住视野 , 显示法线转到可编辑网格,选择面,选择 ,注意下面那个比例调大点,否则看不清楚
Solr 6.7学习笔记（02）-- 配置文件 managed-schema (schema.xml) - filter（5）
自定义fieldType时,通常还会用到filter.filter必须跟在tokenizer或其它filter之后.如: <fieldType> <analyzer> < ...
elasticsearch学习（三）：分布式
es的分布式思想跟现在流行的很多开发技术的分布式一个道理.一个es 搜索服务作为一个集群,集群中存在很多节点,一个节点就是一个搜索服务器.这么多节点中,会按照一定的机制推举出一个 master节点,该 ...

Vue.js之vue-router路由

Vue.js之vue-router路由的更多相关文章

随机推荐

热门专题