Vue router安装及使用方法解析

对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。

安装

基于传统，我更喜欢采用npm包的形式进行安装。

npm install vue-router --save

当然，官方采用了多种方式进行安装，包括bower,cdn等。

基本用法

在HTML文档中使用，只需要利用v-link这个directive就行了，如：

<a v-link="{path: '/view-a'}">Go to view-a</a>

ps: v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为true的时候可以让链接在跳转的时候不会留下历史记录。

而在ES5中使用，需要先创建路由器实例，随后传入配置参数即可，如：

var router = new VueRouter();

router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});

router.start(App, '#app');

以上定义的路由器规则，采用映射到一个组件的方式，最后启动应用的时候，挂载到#app的元素上。

当然，如果你想采用ES6的语法进行配置，也是很容易做到的:

先建立一个路由器模块，主要进行配置和绑定相关信息

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter(); //这里可以带有路由器的配置参数

router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});

export default router; //将路由器导出

在app.js入口启动文件中启用该路由器

import Vue from 'vue';
import router from './routers';

router.start(App, '#app');

嵌套路由

如果想要使用嵌套路由，如/a/b则可以更新路由配置

router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
}
}
}
});

同时，你需要在组件A和组件B中使用<router-view>，如：

<div id="app">
<router-view></router-view>
</div>

组件A中，使用嵌套的外链

<div id="A">
<h1>
This is component A
</h1>
<router-view></router-view>
</div>

路由器将自动渲染对应的组件以及更新路由信息。

其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。

路由对象和路由匹配

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。如

属性 说明
$route.path 当前路由对象的路径，如'/view/a'
$rotue.params 关于动态片段（如/user/:username)的键值对信息,如{username: 'paolino'}
$route.query 请求参数，如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

全匹配片段的语法是使用通配符* 如，/user/*any就会匹配到任何以/user为开头的路径，并给params对象中赋值一个属性any

动态片段的语法就是使用:作为标志。

使用路径名称

在定义路径规则的时候，如果你给它提供了一个name属性，则可以在后续使用这条路径规则的时候，直接引用。

router.map({
'/user/:userId': {
name: 'user',
component: {...}
}
});

在v-link中使用

<a v-link="{name: 'user', params: {userId: 1}">This is a user whose id is 1</a>

还可以使用router.go()

router.go({name: 'user', params: {userId: 1}});

最终都会匹配到/user/1这条路径上

路由选项

路由选项名 默认值 作用
hashbang true 将路径格式化为#!开头
history false 启用HTML5 history模式，可以使用pushState和replaceState来管理记录
abstract false 使用一个不依赖于浏览器的浏览历史虚拟管理后端。
transitionOnLoad false 初次加载是否启用场景切换
saveScrollPosition false 在启用html5 history模式的时候生效，用于后退操作的时候记住之前的滚动条位置
linkActiveClass "v-link-active" 链接被点击时候需要添加到v-link元素上的class类,默认为active

如，我想采用一个有路径格式化并启用Html5 history功能的路由器，则可以在路由器初始化的时候，指定这些参数：

var router = new VueRouter({
hashbang: true,
history: true
});

这里只是做了一些简单的介绍，更多选项其参考官方文档http://router.vuejs.org/zh-cn/。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router 控制路由权限的实现

    注意:vue-router是无法完全控制前端路由权限. 1.实现思路 使用vue-router实例函数addRoutes动态添加路由规则,不多废话直接上思维导图: 2.实现步骤 2.1.路由匹配判断 // src/router.js import Vue from 'vue'; import Store from '@/store'; import Router from 'vue-router'; import Cookie from 'js-cookie'; const routers =

  • vue router返回到指定的路由的场景分析

    项目场景: 项目场景:示例:A(商品详情)--B(商品购买页面)-C(支付成功页面)--D(订单页面) 问题描述: 提示:这里描述项目中遇到的问题: 如果我们不做控制的话,安卓按照浏览器返回机制,依次从D-C-B-A这样子,这样子会有一定的bug,测试那边也是说不过去啊,原本想利用beforeRouteLeave这个来操作进行更改跳转,发现还是有点问题最后还是用beforeRouteEnter来操作了,先放上两个的区别吧: 这里先介绍一下导航守卫 > beforeRouteEnter 离开路由之

  • 详解vue-router的导航钩子(导航守卫)

    在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr

  • vue中使用router全局守卫实现页面拦截的示例

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景 静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户

  • 解决vue-router 嵌套路由没反应的问题

    先看下route.js //route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const Co

  • vue router-link 默认a标签去除下划线的实现

    我就废话不多说了,大家还是直接看例子吧~ .router-link-active{ text-decoration: none; } vue的router-link默认的a标签点击会有一个阴影 补充知识:vue-router更改router-link点击时样式 默认类:router-link-active:可以通过在样式表中重新定义 基类:linkActiveClass:在创建路由时进行全局配置,linkActiveClass:/配置自定义类/ 以上这篇vue router-link 默认a标签

  • vue-router 按需加载 component: () => import() 报错的解决

    vue的单页面(SPA)项目,必然涉及路由按需的问题. 以前我们是这么做的 //require.ensure是webpack里面的,这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue'))); 但现在vue-router的官网看看,推荐这种方式: //vue异步组件和webpack的[代码分块点]功能结合,实现了按需加载 const App =

  • Vue 列表页带参数进详情页的操作(router-link)

    首先,仔细看文档!!!一点一点的踩坑过来的~~~ 这里介绍params和query两种方法 1.用params传参 列表页: <router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">(注意:用params传参这里是命名路由,用name) </router-link> 路由配置如下: export default new Router({ routes: [ { path: '/msgD

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • vue router 路由跳转方法讲解

    目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

  • Vue watch响应数据实现方法解析

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

  • Elasticsearch py客户端库安装及使用方法解析

    一.介绍 elasticsearch-py是一个官方提供的low-level的elasticsearch python客户端库.为什么说它是一个low-level的客户端库呢?因为它只是对elasticsearch的rest API接口做了一层简单的封装,因此提供了最大的灵活性,但是于此同时使用起来就不是太方便.相对于这个low-level的客户端库,官方还提供了一个high-level的python客户端库:elasticsearch-dsl,这个会在另一篇文章中介绍. 更多介绍参见官方文档:

  • Springcloud sentinel安装和使用方法解析

    Springcloud sentinel安装和使用方法解析

    作为阿里版的hystrix,sentinel简化了配置方式,提供了可视化界面网站和便捷的配置方式,更加贴合实际的使用方式,各种优点使得sentinel成为服务降级熔断流控等的最佳选择. 1.安装启用 https://github.com/alibaba/Sentinel/releases 官网选择合适的版本下载,其本体是jar文件. java -jar sentinel-dashboard-1.7.2.jar 由于下载的安装包是jar,所以直接在cmd中启动即可. 登录地址默认是localhos

  • Vue scoped及deep使用方法解析

    众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被

  • Jupyter Notebook安装及使用方法解析

    一.Jupyter Notebook是什么? 1.notebook jupyter简介 Jupyter Notebook是一个开源Web应用程序,允许您创建和共享包含实时代码,方程式,可视化效果和叙述文本的文档.用途包括:数据清理和转换,数值模拟,统计建模,数据可视化,机器学习等 Jupyter Notebook是一个交互式的笔记本,支持运行超过40种编程语言,Jupyter Notebook可以通过网页的形式打开,在网页页面中直接编写代码和运行代码,代码的运行结果也会直接在代码块下面进行显示.

  • vue router下的html5 history在iis服务器上的设置方法

    vue router下的html5 history在iis服务器上的设置方法

    首先先照搬下官网的介绍 当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看! 不过这种模式要玩好,还需要后台配置支持.因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了. 所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个index.html 页面,

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

随机推荐