Vue生态——vue-router

路由概念

路由，是根据不同的url地址，展示不同的内容或页面。

前端路由，把不同路由对应不同的内容或页面的任务交给前端来做。以前呢，是通过服务器来解析url地址不同而渲染出来的。

使用场景

在单页面应用，大部分页面结构不变，只改变部分内容的使用。

优缺点

优点

用户体验好，不需要每次都从服务端全部获取，快速展现给用户。

缺点

不利于SEO。

利用浏览器的前进、后退时，会重新发送请求，没有合理利用缓存机制。

简单配置实例

HTML <div id = 'app'>         <!--这里的router-link to后面加上路径-->        <router-link to="/">首页</router-link>        <router-link to="/about">关于我们</router-link>        <router-link to="/user/tim">Tim</router-link>        <router-link to="/user/chen">Chen</router-link>        <div>            <!--一定要有这组标签，它负责显示模版内容-->            <router-view></router-view>        </div></div>JS//router配置const routes = [    {        path: '/',    //这里指定路径        component: {            template: `            <h1>这里是首页</h1>            `        }    },    {        path: '/about',        component: {            template: `            <div>                <h1>这里是关于我们</h1>            </div>                   `        },    }];const router = new VueRouter({    routes});new Vue({    el: '#app',    router});

使用

传参及获取参数

实例

HTML<!--这里的路径是“/user”加上用户名--><router-link to="/user/tim">Tim</router-link><router-link to="/user/chen">Chen</router-link><div>    <router-view></router-view></div>JS{    // 路径名包含了name变量，上面点击什么名字的链接，就会把name传进来    path: '/user/:name',  //注意要有冒号！    component: {        template: `            <div>               <p>我叫：{{$route.params.name}}</p>            </div>                   `    },}

子路由

直接在路由里面嵌套，使用children。

实例

{    path: '/user/:name',  //注意要有冒号！    component: {        template: `            <div>               <p>我叫：{{$route.params.name}}</p>               //一样需要router-link to子路由路径，记得加上append！！！               <router-link to="more" append>更多信息</router-link>              //同样也别忘了router-view               <router-view></router-view>            </div>                   `        },        //子路由从这里开始！        children: [            {                //子路由路径                path: 'more',                component: {                    template: `                        <div>                            用户{{$route.params.name}}的详细信息                            我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容                        </div>                    `                }            }        ]    }

编程式路由

通过js实现页面的跳转。

方法

$router.push()     跳转到子路由$router.go()       跟BOM对象上的history一样

补充说明：

router.push的参数，可以是字符串，直接填写路由名字。

也可以是对象，如$router.push({path:"name"})

还可以传递参数，如$router.push({path:"name?a=123"})
获取时，使用$router.query

命名路由

router-link 使用v-bind:to添加一个对象，第一个参数是name（路由名字），第二个参数是params（路由参数）。

实例

<router-link v-bind:to="{name: 'product', params:{productId:123} }">//路由设置{       //上面的params里的内容就是变量productId    path: 'paroduct/:productId',    ...}

命名视图

其实就是多个router-view使用时，给它们添加name。

实例

现在有2个路径，视图也有2个。

希望点击用户管理和帖子管理时，sidebar和content视图显示相应的内容。

HTML<div id = 'app'>    <router-link to="/">首页</router-link>    <router-link to="/user">用户管理</router-link>    <router-link to="/post">帖子管理</router-link>    <div>        <router-view name="sidebar"></router-view>        <router-view name="content"></router-view>    </div></div>JS {        //这里是用户管理页面     path: '/user',     //注意，这里是components，复数！     components: {         //定义sidebar         sidebar: {             template: `                 <div>                     <ul>                         <li>用户列表</li>                         <li>权限管理</li>                     </ul>                 </div>                `        },        /定义content        content: {            template: `                <p>内容。。。</p>                `        }    }},{       //这里是帖子管理页面    path: '/post',    //注意，这里是components，复数！    components: {        //定义sidebar        sidebar: {            template: `                <div>                    <ul>                        <li>帖子列表</li>                        <li>标签管理</li>                    </ul>                </div>                `        },        //定义content            content: {                template: `                    <p>内容。。。</p>                `            }        }    }

导航钩子

其实就是导航的生命周期

beforeEach    进入路由页前afterEach     进入路由页后

实例

如果没登录，点击用户管理，会跳转到登录页面。其实就是后端的中间件的意思。

HTML <div id = 'app'>    <router-link to="/">首页</router-link>    <router-link to="/login">登录</router-link>    <router-link to="/user">用户管理</router-link>    <div>        <router-view></router-view>    </div></div>JS//定义路由页设置{    path: '/',    component: {        template: `            <h1>这里是首页</h1>            `    }},{    path: '/login',    component: {        template: `            <h1>这里是登录页面</h1>            `    }},{    path: '/user',    component: {        template: `            <h1>这里是用户管理页面</h1>            `    }},//创建路由const router = new VueRouter({    routes});//注意，就是在创建路由下面设置//beforeEach函数的参数（到哪里去，从哪里来，处理函数）router.beforeEach(function (to,from,next) {    //这里设一个变量存储登录状态    var logged_in = false;                    //这里的to.path指的是要去那个页面    if(!logged_in && to.path == '/user'){        //参数是要跳转到什么页面        next('/login');    }else{        //不传参数，表示直接去要点击的页面        next();    }})

元数据以及路由匹配

上面的例子已经实现了，如果没有登录，就要跳转到登录页面。

但如果，我们现在以登录状态，登录到用户管理界面，并且还在它的子路由界面。

这时候，我们改变为未登录状态，页面刷新一样还在该路径。

因为我们刚刚的判断条件，to.path == '/user'已经不成立了。

这是，我们需要to.math属性，它会迭代我们的路径。

我们还需要使用元数据meta，让它在路由设置选项内部自定义属性，方便我们判断。

实例

{    path: '/user',    //我们在这里利用meta，创建了一个属性    meta:{        login_required: true,    },    component: {        template: `            <div>                <h2>这里是用户管理</h2>                <router-link to='rain' append>雨天</router-link>                <router-view></router-view>            </div>            `    },    children: [{        path: 'rain',        component: {            template: `<p>雨天什么的，最麻烦了。</p>`        }    }]}router.beforeEach(function (to,from,next) {    var logged_in = false;                    //在这里调用了to.mathch的some()方法    if(!logged_in && to.matched.some(function(item){            return item.meta.login_required;        }))        next('/login');    else{        next();    }})