Vue.js实战之利用vue-router实现跳转页面


Posted in Javascript onApril 01, 2017

前言

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。

官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html

这次的实例主要实现下图的效果:

Vue.js实战之利用vue-router实现跳转页面

项目结构:

Vue.js实战之利用vue-router实现跳转页面

一、配置 Router

用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装

cnpm i vue-router -D

安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级

然后在 router.js 中引入所需的组件,创建 routers 对象

import Home from './components/home.vue'

const routers = [
 {
 path: '/home',
 name: 'home',
 component: Home
 },
 {
 path: '/',
 component: Home
 },
]
export default routers

在创建的 routers 对象中, path 配置了路由的路径,component 配置了映射的组件

需要注意的是:export default routers 必须写在文件底部,而且后面还需要接一空行,否则无法通过 ESlint 语法验证

然后 main.js 也需要修改:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './routers'
import App from './App'

Vue.use(VueRouter)

const router = new VueRouter({
 mode: 'history',
 routes: routers
})

new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。

添加 mode: 'history' 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。

关于 HTML5 history 模式的更多内容,可以参考官方文档:https://router.vuejs.org/zh-cn/essentials/history-mode.html

二、嵌套路由

在这个实例中,为了加深项目层级,App.vue 只是作为一个存放组件的容器:

Vue.js实战之利用vue-router实现跳转页面

其中 <router-view> 是用来渲染通过路由映射过来的组件,当路径更改时, <router-view> 中的内容也会发生更改

上面已经配置了两个路由,当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候,就会在 <router-view> 中渲染 home.vue 组件

home.vue 是真正的父组件,first.vue、login.vue 等子组件都会渲染到 home.vue 中的 <router-view>

Vue.js实战之利用vue-router实现跳转页面 

如此一来,就需要在一级路由中嵌套二级路由,修改 routers.js

import Home from './components/home.vue'
import First from './components/children/first.vue'
import Login from './components/children/login.vue'

const routers = [
 {
 path: '/',
 component: Home,
 children: [ 

 { 


path: '/', 
 
  component: Login 

 }

]
 },
 {
 path: '/home',
 name: 'home',
 component: Home,
 children: [
  {
  path: '/',
  name: 'login',
  component: Login
  },
  {
  path: 'first',
  name: 'first',
  component: First
  } 
 ]
 }
]

export default routers

在配置的路由后面,添加 children,并在 children 中添加二级路由,就能实现路由嵌套

配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 不需要添加 " / "

三、使用 <router-link> 映射路由

home.vue 中引入了 header.vue 组件,其中含有导航菜单

当点击导航菜单的时候,会切换 home.vue 中 <router-view> 中的内容

这种只需要跳转页面,不需要添加验证方法的情况,可以使用 <router-link> 来实现导航的功能:

Vue.js实战之利用vue-router实现跳转页面

在编译之后, <router-link> 会被渲染为 <a> 标签, to 会被渲染为 href,当 <router-link> 被点击的时候,url 会发生相应的改变

如果使用 v-bind 指令,还可以在 to 后面接变量,配合 v-for 指令可以渲染导航菜单

如果对于所有 ID 各不相同的用户,都要使用 home 组件来渲染,可以在 routers.js 中添加动态参数:

{ 
 path: '/home/:id',
 component: Home
}

这样 "/home/user01"、"/home/user02"、"/home/user03" 等路由,都会映射到 Home 组件

然后还可以使用 $route.params.id 来获取到对应的 id

四、编程式导航

实际情况下,有很多按钮在执行跳转之前,还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转

Vue.js实战之利用vue-router实现跳转页面

Vue.js实战之利用vue-router实现跳转页面 

push 后面可以是对象,也可以是字符串:

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

五、前车之鉴

在学习的过程中,遇到一个困扰许久的问题,大概是从 first 组件跳转回 login 之后,无法再跳转回去。但是 url 已经被修改,刷新页面也能正常显示。

Vue.js实战之利用vue-router实现跳转页面

这是因为我在 first.vue 组件中的 data 里面没有写 return

Vue.js实战之利用vue-router实现跳转页面 

在 vue 组件中,data 必须写为函数,且需要用 return 来返回参数。但是当 data 为空时,即使不写 return 也不会报错,所以导致了上面的问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
vue.js语法及常用指令
Oct 29 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 #Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 #Javascript
ES6新特性之模块Module用法详解
Apr 01 #Javascript
Vue.js实战之组件之间的数据传递
Apr 01 #Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 #Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
前端自动化开发之Node.js的环境搭建教程
Apr 01 #Javascript
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
公积金贷款承诺书
2015/04/30 职场文书
大学生读书笔记大全
2015/07/01 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js