使用Vue-Router 2实现路由功能
注意: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中,使用的是
在vue-router 2中,使用了<router-link></router-link>替换1版本中的a标签
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">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')
使用Vue-Router 2实现路由功能相关推荐
- Vue Router系列之路由懒加载
文章の目录 一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...
- Vue Router系列之路由重定向
文章の目录 一.什么是路由重定向 二.示例 写在最后 一.什么是路由重定向 路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C,从而展示特定的组件页面:通过路由规则的 redirec ...
- Vue Router路由常用功能总结
Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- Vue2.x - Vue Router
目录 Vue与SPA 什么是SPA 简单了解SPA 什么是MPA SPA相较于MPA的优点 实现SPA的几个关键点 理解SPA单页面架构 什么是前端路由 锚链接与URL中的hash值 通过hashch ...
- Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
- Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移 只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router .这也是我们在主文档中将迁移路 ...
最新文章
- python redis链接建立实现分析
- WinForm界面开发之 启动界面
- Idea根据表自动生成实体
- UA OPTI512R 傅立叶光学导论9 卷积基础
- [SQL实战]之查找所有员工的last_name和first_name以及对应的dept_name,也包括暂时没有分配部门的员工
- 2021年中国电子学习课程市场趋势报告、技术动态创新及2027年市场预测
- 【百度贾磊】汉语语音识别技术重大突破:LSTM+CTC详解(22PPT)
- r语言plotmds_多元统计分析R语言建模| 11 多维标度法MDS
- AD DS 域控与成员计算机的时间一致性
- Crash Course经济学笔记
- 热释电红外传感器电路
- 学画画软件app推荐_学画漫画的APP有哪些?2018动漫绘画学习软件推荐
- PMP项目管理13个计划
- 批处理系统、分时操作系统、实时操作系统
- pandas之透视表
- Chrome谷歌浏览器启用flash插件
- P6070 『MdOI R1』Decrease
- python判断手机号运营商_如何判断手机号的运营商那?
- CAD绘图次序快捷键是什么?怎么用?
- Raft 共识算法3-日志复制
热门文章
- BEM实战之扒一扒淘票票页面 1
- Python格式化工具yapf
- 模电multisim的1.6.1的例题实验演示
- matlab资产投资组合计算,第5章matlab资产组合计算.ppt
- python爬快手个人介绍个性_快手主页介绍个性资料怎么写 快手主页介绍个性签名大全...
- Openstack-Nova简介
- iPhonexs文件连接服务器,iphone XS怎么刷公交?iphone XS乘坐公交方法
- NSAttributedString设置字体属性
- 虚拟机ubuntu18.04屏幕常亮
- 【Reflect】方法(Method)