博客
关于我
vue路由6:导航钩子
阅读量:324 次
发布时间:2019-03-04

本文共 1203 字,大约阅读时间需要 4 分钟。

index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>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="../lib/router.js"></script><script src="./js/app.js"></script></body></html>

app.js:

var routes = [    {        path: '/',        component:{            template: `            <p>这里是首页</p>        `        }    },{        path: '/login',        component: {            template: `            <p>这里是登录!</p>        `        }    },{        path: '/post',        component: {            template: `            <p>这里是帖子管理</p>        `        }    }];var router = new VueRouter({    routes: routes,});router.beforeEach(function(to, from, next){    var login_in = true;    if(!login_in && to.path == '/post'){        next('/login')    }else{        next();    }})router.afterEach(function(to, from){    console.log("to", to);    console.log("form", from);});var app = new Vue({    el: '#app',    router: router})

转载地址:http://jgvq.baihongyu.com/

你可能感兴趣的文章
Paystack Android SDK 集成与使用指南
查看>>
Penetration Testing、Security Testing、Automation Testing
查看>>
php -- 魔术方法 之 判断属性是否存在或为空:__isset()
查看>>
php csv 导出
查看>>
php include和require
查看>>
php mysql优化方法_MySQL优化常用方法
查看>>
PHP OAuth 2.0 Server
查看>>
php openssl aes ecb,php openssl_encrypt AES-128-ECB iOS
查看>>
php paypal rest api,PayPal REST API指定网络配置文件PHP
查看>>
PHP pcntl_fork不能在web服务器中使用的变通方法
查看>>
php private ,public protected三者的区别
查看>>
php PSR规范
查看>>
php redis(2)
查看>>
PHP Redis分布式锁
查看>>
PHP SOAP模块的使用方法:NON-WSDL模式
查看>>
PHP SPL标准库-迭代器
查看>>
php zookeeper实现分布式锁
查看>>
PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题
查看>>
php 反射
查看>>
PHP 实现N阶矩阵相乘
查看>>