2018年11月11日 关于Vue的命名视图 and 导航钩子 and 元数据及路由匹配

1、命名视图

//在html中相关代码
<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>

//在Vue.js中相关代码
var nqy = [
    {
        path:'/',
        component:{
            template:`
                <div>
                 <h1>首页</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/user',
        components:{
            sidebar:{
            template:`
                <div>
                    <ul>
                        <li>用户列表</li>
                        <li>用户权限</li>
                    </ul>
                </div>
            `,
            },
            content:{
                template:`
                <div>how are you ? i am fine ,thank you , and you?how are you ? i am fine ,thank you , and you?</div>
                `,
            }
        }
    } ,
    {
        path:'/post',
        components:{
            sidebar:{
            template:`
                 <div>
                    <ul>
                        <li>帖子列表</li>
                        <li>帖子权限</li>
                    </ul>
                </div>
            `,
            },
            content:{
                template:`
                <div>how are you ? i am fine ,thank you , and you?how are you ? i am fine ,thank you , and you?</div>
                `,
            }
        }
    } ,

];

var nyp = new VueRouter({
    routes:nqy,
});

var app = new Vue({
   el:'#app',
    router:nyp,
    methods:{
       surf:function () {
           setTimeout(function () {
               this.nyp.push('/about');
               setTimeout(function () {
                   this.nyp.push({name:'user',params:{name:'张三三'}})
               },2000)
           },2000)
       }
    }
});

2、导航钩子

//在html中相关代码
  <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>

在Vue.js中相关代码
var nqy = [
    {
        path:'/',
        component:{
            template:`
                <div>
                 <h1>首页</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/login',
        component:{
            template:`
                <div>
                 <h1>登录</h1>
                </div>
            `,
        }
    },
    {
         path:'/post',
             component:{
         template:`
                    <div>
                     <h1>帖子管理</h1>
                    </div>
                `,
             }
     }
];

var nyp = new VueRouter({
    routes:nqy,
});

nyp.beforeEach(function (to,from,next) {
    var logged_in = false;
    if (!logged_in && to.path =='/post')
        next('/login');
    else
        next();
});
var app = new Vue({
   el:'#app',
    router:nyp,
});

3、元数据及路由匹配

//在html中的相关代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/post">帖子管理</router-link>
        <router-link to="/a">a</router-link>
    </div>
    <div>
        <router-view></router-view>

    </div>
</div>

//在Vue.js中的相关代码
var nqy = [
    {
        path:'/',
        component:{
            template:`
                <div>
                 <h1>首页</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/a',
        meta:{
            login_required:true,
        },
        component:{
            template:`
                <div>
                 <h1>A</h1>
                </div>
            `,
        }
    } ,
    {
        path:'/login',
        component:{
            template:`
                <div>
                 <h1>登录</h1>
                </div>
            `,
        }
    },
    {
         path:'/post',
        meta:{
             login_required:true,
        },
             component:{
         template:`
                    <div>
                         <h1>帖子管理</h1>
                         <div>
                             <router-link to="more" append>帖子内容</router-link>
                             <router-view></router-view>
                         </div>
                    </div>
                `,
             },
        children:[
            {
                path:'more',
                component:{
                    template:`
                    <div>how are you ? i am fine ,thank you , and you?how are you ? i am fine ,thank you , and you?</div>
                    `,
                }
            }
        ]

     }
];

var nyp = new VueRouter({
    routes:nqy,
});

nyp.beforeEach(function (to,from,next) {
    var logged_in = false;
    if (!logged_in && to.matched.some(function (item) {
            return item.meta.login_required;
        }))
        next('/login');
    else
        next();
});
var app = new Vue({
   el:'#app',
    router:nyp,
});