作为Vue生态系统里面的一大成员,Vue-Router主要负责vue中的页面路由及其传值问题。

1、基本使用–添加路由

基本使用主要包括四个部分,页面引入、配置路由数组、实例化路由、把实例化的路由加入Vue的实例化中。如下,

// 组件引入,主要有以下三种方式
const index = resolve => require(['./index'], resolve) // 组件异步引入,不会打包到webpack的main.js里面
import Bar from '../bar' // 组件同步引入,会打包到webpack的main.js里面
const Foo = { template: '<div>foo</div>' } // 组件同步引入,会打包到webpack的main.js里面
// 配置路由数组--路由真正的详细配置
const routes = [
{ path: '/index', component: index},
{ path: '/foo', component: Foo},
{ path: '/bar', component: Bar}
]
// 实例化路由
const router = new VueRouter({
   mode: 'history', // 两种类型history 还有 hash
routes: routes // 可以缩写成routes
})
// 在Vue实例化中加入路由实例
new Vue({
el: '#app',
router,
render: h => h(App)
})

四步完成后,路由信息就添加到整个Vue实例中,可供全局调用了。 
而在路由的详细配置中,还有很多信息,下面看一个相对详细点的,

const routes = [{
path: '/pages/trade',
component: App,
children: [{
path: '/',
component: index,
name: 'index',
meta: {
title: '导航页'
}
}, {
path: 'confirm',
component: confirm,
name: 'confirm',
meta: {
title: '确认订单'
},
children: addressRouter
}]
}, {
path: '/pages/sale',
component: App,
children: [{
path: 'product/:productId(\\d+)',
component: product,
name: 'product',
meta: {
title: '商品详情'
}
}]
}, {
path: '*',
component: noFound,
name: 'err',
meta: {
title: '404'
}
}]

路由中主要涉及到的一些参数

Item Value
name 路由标识
path 路由标识,路由路径
component 实际组件
children : 子路由
meta : 附加信息,可以包含一些诸如title的信息

name和path很相似,都可以用来作为跳转的标识,但有以下几点不同 
1) path最终会作为url的一部分,name不会。 
2) path里面可以做一些正则匹配,而name里面一般不会添加正则来做更多的匹配。

2、声明式路由与编程式路由 – 路由基本使用

引入路由之后,vue-Router的使用也十分方便。主要由以下两种方式

// 声明式路由
<router-link class="common_ques" :to="{ name: 'foo', params: { productId: 123 }}">Foo</router-link>
<router-link class="common_ques" :to="{ path: 'foo', query: { productId: 123 }}">Foo</router-link>
// 编程式路由
router.push({
name: 'foo',
params: {
a: 'a'
}
})

两种方式一个用于template中,一个用于script中,跳转效果一致, 但相比而言router.push的形式灵活性更好一些。就像下面两个一样

<a href="www.baidu.com"></a>

window.location.href = 'www.baidu.com'

下面以编程式路由详细说一下

// 编程式路由
router.push({
name: 'foo',
params: {
a: 'a'
}
})

编程式路由主要有push、replace、go三中方法。 
1)push、replace 
这两种方法主要接受两类参数, 
·路径:name/path 
·参数:params/query 
name和path的区别上文已经提过。params和query两个都是用来进行路由参数传递的,不同的是query传递的参数会以出现在url中的search部分,而params的则不会,其他基本一致。params和query可以同时传递,但一般没啥必要。。。 
2)go 
go只接收一个参数,就是数字~~。和history的go是一样的,自行领会。

参数的接收和使用

上面说了传参,下面看看怎么接收和使用,很简单

this.$route.query
this.$route.params

刚开始用的时候,注意别写成router就好了。 
下一部分再写一下关于钩子的使用、路由模式一些问题,这次到这吧。

Vue-Router基础使用的更多相关文章

  1. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  2. vue Router——基础篇

    vue--Router简介 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路 ...

  3. Vue Router基础

    路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...

  4. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  5. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  6. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  7. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

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

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

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

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

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

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

随机推荐

  1. jdbc报java.lang.ClassNotFoundException: com.mysql.jdbc.Drive

    今天从开始写了一个jdbc连接mysql驱动的程序 真的是各种报错啊 首先这是代码 package com.dmeck; import java.sql.Connection; import java ...

  2. 最新的 Vue 相关开源项目库汇总

    优秀的vue 开源后台管理开源系统框架 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/README UI组件 开发框架 实用库 ...

  3. [转]Composite Keys With WebApi OData

    本文转自:http://chris.eldredge.io/blog/2014/04/24/Composite-Keys/ In our basic configuration we told the ...

  4. 搭建jdk环境

    jdk(java develop toolkit)主要包括:编译程序的javac,运行程序的java,javaAPI类库. 主要步骤: 下载jdk安装包 设置环境变量(JAVA_HOME,Path,C ...

  5. android FrameLayout

    FrameLayout:帧布局,可以显示图片的动画效果 前景图像: 永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片 常用属性: android:foreground:设置该帧布局容器 ...

  6. .net core mvc 类库读取配置文件

      appsettings.json,给类库项目引入 Microsoft.Extensions.Configuration 和 Microsoft.Extensions.Configuration.J ...

  7. [C#]LockBits使用笔记

    昨天想基于一张图片做个手机锁屏来着,原图如下:主要是嫌白底太丑了,一开始是想画图工具直接油漆桶伺候,然而一浇上去就发现问题了,变成了这样:看来得手工处理一下把底色统一了,原图分辨率挺高的,SetPix ...

  8. java模式之一------代理模式

    代理模式的概念:对其他对象提供一种代理以控制对这个对象的访问 代理模式的三种实现 (1)静态代理 静态代理在使用时,需要定义接口或者父类,被代理对象与代理对象一起实现相同的接口或者是继承相同父类. e ...

  9. 阿里巴巴的数据池DRUID

      使用了阿里巴巴的数据池管理: 监控DB池连接和SQL的执行情况 https://github.com/alibaba/druid/wiki/常见问题 https://www.cnblogs.com ...

  10. lumen配置日志daily模式

    默认的日志保存模式是single 也就是单文件模式 要想改成每日的daily模式可以在bootstrap/app.php下添加: /* * 配置日志文件为每日 */ $app->configur ...