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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
使用Python进行目录的对比方法
2018/11/01 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
英文简历自荐信范文
2013/12/11 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
啤酒节策划方案
2014/05/28 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers