(转)使用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功能请参考文档:https://router.vuejs.org/zh-cn/
转载于:https://www.cnblogs.com/lsy0403/p/8665422.html
(转)使用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 .这也是我们在主文档中将迁移路 ...
最新文章
- 翻转单词顺序与左旋转字符串
- 查看http的并发请求数与其TCP连接状态
- TF-IDF理解及其Java实现
- J2SE核心实战开发—— 集合类框架
- spark: 二次排序-1
- 刷leetcode不知道从哪里刷起?? 来看看,我把刷题题目顺序都排好了,每道题还带详细题解!
- android阴影edittext,android – 将阴影效果添加到EditText字段
- MATLAB music分解信号,MUSIC算法信号频率问题求解
- java简单实现一个缓存_java简单实现缓存的三种方法
- 学计算机的怎样分析TCGA数据库,TCGA一些数据库
- 什么是具身认知?反身理论?
- 一篇文章带你了解系统流程图和业务流程图的区别
- 【天怒人怨爸爸系列】一年级数学口算题生成程序
- cad图转成shp文件并把其平面坐标投影配准成大地坐标(配准针对没有底图的情况)
- leetcode:BFS/DFS--腐烂的橘子
- 蓝牙map协议源码解析
- 图像相似算法最全总结
- CSAPP Final Exam Preparation: reading solution records (2b continued)
- java和javascript的区别(html和javascript的区别)
- 注意力图Attention map可视化【亲测完美】
热门文章
- JAVA的静态函数不能重载,可以覆盖(隐藏)
- 原来编译通过,现在编译不通过,怎么回事?
- 肯定存在无摩擦力的材料
- 纽微特纪事:吾是如何被架空的(各位引以为戒)
- 解决办法:一切都正确,Python3执行PyImport_Import()一直返回NULL
- 换回了WINDOWS7
- 解决办法:ImportError: No module named google.protobuf.internal
- 二叉树的三种非递归遍历
- linux 查看pgsql端口,如何通过Linux脚本检查是否已安装PostgreSQL?
- nanopc t3开发板系统烧录_基础教程18 定制 Arduino 系统