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 10 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
vuejs如何配置less
Apr 25 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue路由的配置和页面切换详解
Sep 09 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
竞聘书模板
2014/03/31 职场文书
签约仪式策划方案
2014/06/02 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Redis如何实现分布式锁
2021/08/23 Redis