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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
JS性能优化实现方法及优点进行
Aug 30 Javascript
react antd实现动态增减表单
Jun 03 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP Socket 编程
2010/04/09 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python命令启动Web服务器实例详解
2017/02/23 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
环保公益广告语
2014/03/13 职场文书
校长寄语大全
2014/04/09 职场文书
党员个人党性分析材料
2014/12/18 职场文书
超市工作总结范文2014
2014/12/19 职场文书
婚宴来宾致辞
2015/07/28 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers