1、权限控制

例如：登录后登录前的页面不一样

借助路由元信息完成

一个示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

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

</head>

<body>

    <div id="app">

        <!-- 声明式导航 -->

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

        <router-link to="/blog">我的博客</router-link>

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

        <!-- <router-link to="/blog">退出</router-link> -->

        <a href="javascript:void(0)" @click="clear">退出</a>

        <router-view></router-view>

    </div>

</body>

<script>

    Vue.use(VueRouter)

    let Home = {

        template: '<h1>首页内容</h1>'

    }

    let Blog = {

        template: '<h1>博客页内容</h1>'

    }

    let Login = {

        template: `<div>

        <input type="text" v-model="name">

        <input type="text" v-model="pwd">

        <input type="button" value="登录" @click="login">

        </div>`,

        data() {

            return {

                name: '',

                pwd: ''

            }

        },

        methods: {

            login() {

                localStorage.setItem('user', this.name)

                //利用编程式导航实现登陆后跳转

                this.$router.push({name:'blog'})

            }

        }

    }

    var router = new VueRouter({

        routes: [

            {

                path: '/home',

                component: Home

            },

            {

                path: '/',

                redirect: 'home'

            },

            {

                path: '/blog',

                component: Blog,

                name:'blog',

                //为未来的路由作权限控制 全局路由守卫作参照条件

                meta: {

                    //若auth为true，则用户访问该组件时需要登录

                    auth: true

                }

            },

            {

                path: '/login',

                component: Login

            }

        ]

    })

    router.beforeEach((to, from, next) => {

        if (to.meta.auth) {

            if (localStorage.getItem('user')) {

                next()//已有登录状态，放行

            } else {//需要登录

                next({ path: '/login' })//未登录，利用next重定向至登录组件

            }

        } else {

            next()//放行

        }

    })

    new Vue({

        el: '#app',

        router,

        methods:{

            clear(){

                localStorage.removeItem('user')

                this.$router.push('/login')

            }

        }

    })

</script>

</html>

2、keep-alive

1）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

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

</head>

<body>

    <div id="app">

    </div>

</body>

<script>

    Vue.use(VueRouter)

    let Series = {

        template: `<div>付费栏目</div>`

    }

    let Topics = {

        template: `<div>砖头广场</div>`

    }

    let App = {//keep-alive将组件状态放至缓存中保存起来

        template: `<div>

        <router-link to="/series">付费栏目</router-link>

        <router-link to="/topics">砖头广场</router-link>

        <keep-alive>

        <router-view></router-view>

        </keep-alive>

        </div>`

    }

    let router=new VueRouter({

        routes:[

            {path:'/series',component:Series},

            {path:'/topics',component:Topics},

        ]

    })

    new Vue({

        el: '#app',

        template: `<App />`,

        components: {

            App

        },

        router

    })

</script>

</html>

Vue-router重修02的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  5. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  6. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  10. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

随机推荐

  1. Android OS的image文件组成

    Android OS由以下image文件组成: 1)Bootloader ---在设备启动时开始加载Boot image 2)Boot image ---Kernel 和 RAMdisk 3)Syst ...

  2. tcp与ip协议的区别

    TCP/IP(TransmissionControlProtocol/InternetProtocol的简写,中文译名为传输控制协议/互联网络协议). 简单地说,就是由底层的IP协议和TCP协议组成的 ...

  3. 4327: JSOI2012 玄武密码

    4327: JSOI2012 玄武密码 Description 在美丽的玄武湖畔,鸡鸣寺边,鸡笼山前,有一块富饶而秀美的土地,人们唤作进香河.相传一日,一缕紫气从天而至,只一瞬间便消失在了进香河中.老 ...

  4. SQL对某个字段进行排名

    SELECT ( ) AS rowno, a.badge,a.NAME,a.direct_evaluate_rate,a.view_rate FROM ( SELECT * FROM `hrs_sta ...

  5. SSL 3.0曝出Poodle漏洞的解决方案

    tomcat 各版本对ssl解决方案的配置:tomcat6: <Connector port="443" protocol="org.apache.coyote.h ...

  6. 使用makecert.exe创建数字证书

    RT makecert.exe不用去找,安装VS2008后,在开始菜单相应的路径找到该命令提示符:Microsoft Visual Studio 2008/Visual Studio Tools/Vi ...

  7. 在.Net Framework中调用Python的脚本方法 （以VB和C#为例）

    某个项目中涉及到这样一个情景: VB/C#写的原始项目要调用Python的一些方法完成特殊的操作, 那么这就涉及到了,在.Net Framework中如何调用Python的脚本方法. 具体步骤流程如下 ...

  8. Semantic difference between object expressions and declarations

    object expressions are executed (and initialized) immediately, where they are used; object declarati ...

  9. nginx代理tcp协议连接mysql

    阅读目录 一.mariadb安装及配置 1.1 在192.168.182.155安装mariadb 1.2 配置MariaDB的字符集 1.3  添加用户,设置权限 1.4 防火墙设置 二.nginx ...

  10. 自动化设计模式Page Object

    https://blog.csdn.net/qq_37546891/article/details/79052054#t1