Vue-Router基础使用

作为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就好了。  下一部分再写一下关于钩子的使用、路由模式一些问题,这次到这吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏光变

Vim实现批量注释的方法

调试代码的时候,免不了要批量注释/取消代码注释,很多IDE都有快捷键将你选中的…

13310
来自专栏软件测试经验与教训

回放loadrunner脚本时log区中文显示乱码,怎么破?

419120
来自专栏Python

vim显示行号、语法高亮、自动缩进的设置

23820
来自专栏Java后端技术

Linux的Bash Shell详解

  1.什么是bash           bash是Bourne Again Shell的简称,是从unix系统中的sh发展而来的,是用户和Linux内核交互...

11540
来自专栏Micro_awake web

HTML/HTML5 Input类型&&表单

1.HTML 中"不常用"input类型中的属性值: disabled:输入字段禁用; maxlength:输入字段的最大字符长度; readonly:输入字符...

33270
来自专栏酷玩时刻

微信公众号开发之如何使用JSSDK

使用JSSDK主要包括 1、判断当前客户端版本是否支持指定JS接口、 2、分享接口(微信认证) 3、图像接口 4、音频接口 5、智能接口(识别语音并返...

54430
来自专栏运维小白

5.5 进入编辑模式

编辑模式:就是进入到可以编辑文本文件的模式 ? 进入编辑模式方法: i ,直接在当前光标处进入编辑模式 I (大写I),光标直接移动到该行的行首,并进入编辑...

21170
来自专栏搞前端的李蚊子

微信返回码说明

返回码说明 返回码    说明 -1     系统繁忙 0     请求成功 40001     验证失败 40002     不合法的凭证类型 40003  ...

39860
来自专栏飞雪无情的博客

Go语言实战笔记(三)| Go Doc 文档

对于协作开发或者代码共享来说,文档是一个可以帮助开发者快速了解以及使用这些代码的一个教程,文档越全面,越详细,入门越快,效率也会更高。

18030
来自专栏北京马哥教育

linux中的vi编辑器

vim文字处理器 linux 下的vi 是一种文字编辑器,后来的升级版本是vim。vi 分为三种模式:一般模式、编辑模式、命令命令模式。它们之间的关系如下: ?...

496110

扫码关注云+社区

领取腾讯云代金券