1. Vue Router简介与安装

1.1 Vue Router简介

　　Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，构建单页面应用。

　　Vue Router支持3种路由模式：

　　　　◊ hash：使用URL hash值作为路由，HTML5 History API出现之前，前端路由都通过hash来实现。hash实现需要在URL中加上#，Web服务不会解析hash，自动忽略#后面的内容，JavaScript通过window.location.hash读取解析。

　　　　◊ history：依赖HTML5 History API和服务器配置

　　　　◊ abstract：支持所有JavaScript运行环境，如node服务器端。如果发现没有浏览器的API，路由就会强制进入该模式。

　　vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑：

　　　　◊ <router-view>：渲染路径匹配到的组件视图

　　　　◊ <router-link>：支持用户在具有路由功能的应用中导航

1.2 Vue Router安装

　　Vue Router官方网址：https://github.com/vuejs/vue-router

　　Vue Router文档教程：https://router.vuejs.org/zh/

　　npm安装VueRouter：

npm install vue-router

2. 起步示例

2.1 单个html页面中使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

    <title>libing.vue</title>

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

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

</head>

<body>

    <div id="app">

        <ul>

            <li>

                <router-link to="/home">Home</router-link>

            </li>

            <li>

                <router-link to="/about">About</router-link>

            </li>

        </ul>

        <router-view></router-view>

    </div>

    <template id="home">

        <div>Home</div>

    </template>

    <template id="about">

        <div>About</div>

    </template>

    <script>

        var home = Vue.extend({

            template: "#home"

        });

        var about = Vue.extend({

            template: "#about"

        });

        const routes = [{

                path: '/home',

                component: home

            },{

                path: '/about',

                component: about

            }

        ];

        const router = new VueRouter({

            routes: routes

        });

        const app = new Vue({

            router

        }).$mount('#app');

    </script>

</body>

</html>

Index.html

2.2 vue-cli中模块化使用

　　（1）创建基于vue-cli项目

$ vue init webpack libing.vue

　　（2）/src/views中新建Home.vue及About.vue

<template>

    <div>{{ title }}</div>

</template>

<script>

export default {

    data: function() {

        return {

            title: "主页"

        };

    }

};

</script>

Home.vue

<template>

    <div>{{ title }}</div>

</template>

<script>

export default {

    data: function() {

        return {

            title: "关于"

        };

    }

};

</script>

About.vue

　　（3）/src/route/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/views/Home'

import About from '@/views/About'

Vue.use(Router)

export default new Router({

    routes: [{

            path: '/',

            name: 'home',

            component: Home

        },

        {

            path: '/home',

            name: 'home',

            component: Home

        },

        {

            path: '/about',

            name: 'about',

            component: About

        }

    ]

})

　　（4）/src/App.vue

<template>

    <div id="app">

        <ul>

            <li>

                <router-link to="/home">Home</router-link>

            </li>

            <li>

                <router-link to="/about">About</router-link>

            </li>

        </ul>

        <router-view/>

    </div>

</template>

<script>

export default {

    name: "App"

};

</script>

　　在router-link通过名称引用路由：向to属性传入一个对象显式的声明路由的名称。

<router-link :to="{ name: 'home' }">Home</router-link>

注：在/src/route/index.js中配置路由路径时，创建Router 对象new Router({})，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头。

设置 mode: "history" 将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录。

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/views/Home'

import About from '@/views/About'

Vue.use(Router)

export default new Router({

    mode: 'history',

    routes: [{

            path: '/',

            name: 'home',

            component: Home

        },

        {

            path: '/home',

            name: 'home',

            component: Home

        },

        {

            path: '/about',

            name: 'about',

            component: About

        }

    ]

})

3. 动态路由匹配

　　在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) ，动态部分以 : 开头。

　　/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/views/Home'

import About from '@/views/About'

import User from '@/views/User'

Vue.use(Router)

export default new Router({

    mode: 'history',

    routes: [{

            path: '/',

            component: Home

        },

        {

            path: '/home',

            component: Home

        },

        {

            path: '/about',

            component: About

        },

        {

            // 动态路径参数 以冒号开头

            path: '/user/:id',

            component: User

        }

    ]

})

　　User.vue：

<template>

    <div>User ID:{{ $route.params.id }}</div>

</template>

<template>

    <div>User ID:{{ id }}</div>

</template>

<script>

export default {

    data() {

        return {

            id: this.$route.params.id

        };

    }

};

</script>

　　App.vue：

<template>

    <div id="app">

        <ul>

            <li>

                <router-link to="/home">Home</router-link>

            </li>

            <li>

                <router-link to="/about">About</router-link>

            </li>

            <li>

                <router-link to="/user/1">User ID:1</router-link>

            </li>

            <li>

                <router-link to="/user/2">User ID:2</router-link>

            </li>

        </ul>

        <router-view/>

    </div>

</template>

<script>

export default {

    name: "App"

};

</script>

　　在User.vue中直接通过 {{ $route.params.id }} 获取路由中路径参数值。

　　当整个vue-router 注入到根实例后，在组件的内部，可以通过this.$route 来获取到 router 实例。

　　$route中params 属性来获得动态部分，params 属性是一个对象。

　　属性名是路径中定义的动态部分 id, 属性值是router-link中to 属性中的动态部分。

　　在<router-link>中加入一个params的属性来指定具体的参数值。

<router-link :to="{ name: 'user', params:{ id: 1 }}">UserID:1</router-link>

4. 嵌套路由

　　实际应用界面，通常由多层嵌套的组件组合而成。

　　vue-router配置嵌套路示例：

　　App.vue

<template>

    <div id="app">

        <ul>

            <li>

                <router-link to="/home">Home</router-link>

            </li>

            <li>

                <router-link :to="{ name: 'about' }">About</router-link>

            </li>

            <li>

                <router-link :to="{ name: 'user', params:{ id: 1 }}">UserID:1</router-link>

            </li>

            <li>

                <router-link to="/user/2">UserID:2</router-link>

            </li>

        </ul>

        <router-view/>

    </div>

</template>

<script>

export default {

    name: "App"

};

</script>

　　这里的<router-view>是最顶层的出口，渲染最高级路由匹配到的组件。

　　一个被渲染组件同样可以包含自己的嵌套 <router-view>。

　　User.vue

<template>

    <div>

        <h2>User ID:{{ $route.params.id }}</h2>

        <router-view></router-view>

    </div>

</template>

<script>

export default {};

</script>

　　要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

　　index.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/views/Home'

import About from '@/views/About'

import User from '@/views/User'

import UserProfile from '@/views/UserProfile'

Vue.use(Router)

export default new Router({

    mode: 'history',

    routes: [{

            path: '/',

            name: 'home',

            component: Home

        },

        {

            path: '/home',

            name: 'home',

            component: Home

        },

        {

            path: '/about',

            name: 'about',

            component: About

        },

        {

            // 动态路径参数 以冒号开头

            path: '/user/:id',

            name: 'user',

            component: User,

            children: [{

                // 当 /user/:id/profile 匹配成功，

                // UserProfile 会被渲染在 User 的 <router-view> 中

                path: 'profile',

                name: 'profile',

                component: UserProfile

            }]

        }

    ]

})

　　UserProfile.vue

<template>

    <div>User Profile</div>

</template>

<script>

export default {};

</script>

　　访问嵌套路由方式：http://localhost:8080/user/1/profile

　　在嵌套路由中访问父级路由参数：

<template>

    <div>User Profile:{{ $route.params.id }}</div>

</template>

<script>

export default {};

</script>

　　当访问 /user/1 时，提供一个空的子路由。

{

    // 动态路径参数 以冒号开头

    path: '/user/:id',

    name: 'user',

    component: User,

    children: [{

        // 当 /user/:id 匹配成功，

        // UserProfile 会被渲染在 User 的 <router-view> 中

        path: '',

        component: UserProfile

    }, {

        // 当 /user/:id/profile 匹配成功，

        // UserProfile 会被渲染在 User 的 <router-view> 中

        path: 'profile',

        name: 'profile',

        component: UserProfile

    }]

}

5. 命名视图

　　若要同级展示多个视图（非嵌套），使用命名视图。

　　如果router-view没有设置名字，则默认为 default。

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

　　一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。使用 components 配置。

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

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

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

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

　　Route配置：

export default new Router({

    routes: [{

            path: '/',

            name: 'home',

            components: {

                default: Home,

                header: Header,

                slidebar: SlideBar,

                footer: Footer

            }

        }

    ]

})

　　命名嵌套视图：

<template>

    <div>

        <h2>User ID:{{ $route.params.id }}</h2>

        <router-view></router-view>

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

    </div>

</template>

<script>

export default {};

</script>

export default new Router({

    routes: [{

            // 动态路径参数 以冒号开头

            path: '/user/:id',

            name: 'user',

            component: User,

            children: [{

                // 当 /user/:id 匹配成功，

                // UserProfile 会被渲染在 User 的 <router-view> 中

                path: '',

                component: UserProfile

            }, {

                // 当 /user/:id/profile 匹配成功，

                // UserProfile 会被渲染在 User 的 <router-view> 中

                path: 'profile',

                name: 'profile',

                components: {

                    default: UserProfile,

                    defined: UserDefinedProfile

                }

            }]

        }

    ]

})

6. 编程式导航

　　除了使用 <router-link> 创建 a 标签来定义导航链接，还可以借助 router 的实例方法，通过编写代码来实现。

<template>

    <div>

        <input type="button" value="跳转" @click="handleRedirect" />

    </div>

</template>

<script>

export default {

    methods: {

        handleRedirect() {

            this.$router.push({ path: "/" });

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

            this.$router.push({ name: 'user', params: { id: 1 }})

        }

    }

};

</script>

7. 导航守卫

7.1 全局前置守卫

　　使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

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

  // ...

})

　　示例：

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{

    path: '/',

    name: 'home',

    component: Home

  },

  {

    path: '/about',

    name: 'about',

    component: () => import('../views/About.vue')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆。

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

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Token');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

})

export default router

Vue.js 2.x笔记：路由Vue Router（6）的更多相关文章

Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
vue.js应用开发笔记
看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项目需求讨论就差不多一周了,这要搁之前,天 ...
Vue.js 相关知识（路由）
1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入v ...
Vue.js随笔二(新建路由+component+添加样式+变量的显示)
创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...
Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
Vue.js 的几点总结Watchers/router key/render
Vue.js 的几点总结,下面就是实战案例,一起来看一下. 第一招:化繁为简的Watchers 场景还原: 1 2 3 4 5 6 7 8 created(){ this.fetchPostLis ...
Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
两万字Vue.js基础学习笔记
Vue.js学习笔记目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点官网:http://cn ...

随机推荐

前端笔记之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链
一.对象(Object) 1.1 认识对象对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体, ...
4.1ASP.NET Core请求过程「深入浅出ASP.NET Core系列」
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. HTTP请求过程这里展示整体的HTTP请求的过程,这里化繁为简,保留了主干流程: 从浏览器输入域名开始,这里忽略 ...
java 并发多线程锁的分类概念介绍多线程下篇（二）
接下来对锁的概念再次进行深入的介绍之前反复的提到锁,通常的理解就是,锁---互斥---同步---阻塞其实这是常用的独占锁(排它锁)的概念,也是一种简单粗暴的解决方案抗战电影中,经常出现为了阻止日 ...
AppBoxFuture(五): 分布式文件存储-Store Everything
本来本篇是想介绍前端组件化开发用户界面,发现框架还未实现文件存储,原本计划是后续设计开发的,索性把计划提前,所以本篇将介绍基于Raft实现分布式的文件存储引擎. 一. 实现思路既然是分布式存 ...
JAVA WEB快速入门之环境搭建
前言我是一直致力于:.NET技术栈.WEB前端.架构设计相关的开发与管理工作,但因国内大环境影响及公司技术方向发生转变(由.NET全部转为JAVA),需要熟练掌握JAVA WEB相关的知识,故我也得 ...
Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
DS控件库 DS按钮多种样式
在DS控件库(DSControls)中,DS按钮的功能非常多,通过设置不同的属性值来使按钮呈现不同的效果.DS按钮的常用属性如下: 使用不同的属性调出不同的外观样式示例
SpringBoot从零到上线
SpringBoot精要 SpringBoot的四个核心 1.自动配置:针对很多Spring应用程序常见的应用功能,SpringBoot能自动提供相关配置. 在任何Spring应用程序的源代码中,都可 ...
jQuery里面的常用的事件和基础动画的实现
一:了解jquery里面常用的事件二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...
h5页面 video暂停播放视频控件以及当前页面只有一个可以播放效果
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

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