Vue实现路由跳转和嵌套


Posted in Javascript onJune 20, 2017

一、配置 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实现路由跳转和嵌套

其中 <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实现路由跳转和嵌套

如此一来,就需要在一级路由中嵌套二级路由,修改 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实现路由跳转和嵌套

在编译之后,<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实现路由跳转和嵌套

Vue实现路由跳转和嵌套

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

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

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

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

五、前车之鉴

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

Vue实现路由跳转和嵌套

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

 Vue实现路由跳转和嵌套 Vue实现路由跳转和嵌套

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery 插件学习(三)
Aug 06 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 #Javascript
JS中的三个循环小结
Jun 20 #Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
You might like
php的access操作类
2008/04/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
js实现进度条的方法
2015/02/13 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
快速入门Vue
2016/12/19 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
python中的多线程实例教程
2014/08/27 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Django用户身份验证完成示例代码
2020/04/03 Python
如何使用python切换hosts文件
2020/04/29 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
电影雨中的树观后感
2015/06/15 职场文书