Vue.js:使用Vue-Router 2实现路由功能介绍


Posted in Javascript onFebruary 22, 2017

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。

推荐使用npm安装。

npm install vue-router

一、使用路由

在main.js中,需要明确安装路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
//1.定义组件,这里使用从其他文件import进来
import index from './components/index.vue'
import hello from './components/hello.vue'
//2.定义路由
const routes = [
{ path: '/index', component: index },
{ path: '/hello', component: hello },
]
//3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
 routes
})
//4. 创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
const app = new Vue({
  router,
 render: h => h(App)
}).$mount('#app')

经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>

那么这个App.vue里应该这样写:

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

index.html里呢要这样写:

<body>
<div id="app"></div>
</body>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

二、重定向  redirect

const routes = [
{ path: '/', redirect: '/index'},   // 这样进/ 就会跳转到/index
{ path: '/index', component: index }
]

三、嵌套路由

const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
] }
]

通过/index/info就可以访问到info组件了

四、懒加载

const routes = [
{ path: '/index', component: resolve => require(['./index.vue'], resolve) },
{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

通过懒加载就不会一次性把所有组件都加载进来,而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

五、<router-link>

在vue-router 1中,使用的是<a v-link="{path:'/index'}"></a>

在vue-router 2中,使用了<router-link></router-link>替换1版本中的a标签

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

六、路由信息对象

1.$route.path

字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。

2.$route.params

一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

3.$route.query

一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

4.$route.hash

当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

5.$route.fullPath

完成解析后的 URL,包含查询参数和 hash 的完整路径。

6.$route.matched

一个数组,包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本(还有在 children 数组)。

综合上述,一个包含重定向、嵌套路由、懒加载的main.js如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
 routes:[
  { path: '/', redirect: '/index' },
  { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
children:[
     { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
    ]
  },
  { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
 ]
})
const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
JSON取值前判断
Dec 23 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
svg动画之动态描边效果
Feb 22 #Javascript
jQuery实现的简单拖动层示例
Feb 22 #Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
You might like
php 分页类 扩展代码
2009/06/11 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP错误机制知识汇总
2016/03/24 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
javascript date格式化示例
2013/09/25 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Flask框架的学习指南之用户登录管理
2016/11/20 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
法律进社区实施方案
2014/03/21 职场文书
先进个人推荐材料
2014/12/29 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL