想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。
注意:
- 本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板;
- 本文知识点是基于Vue2.0和vue-route 2的,更多内容请参考Vue.js官网和vue-router 2官方文档:
一、路由的安装:
npm安装
可以使用npm直接安装插件
npm install vue-router --save
执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行npm install
即可完成安装。(感谢 @waynezheng、@昊哥哥 指出的关于dependency的问题,已更正^-^。)
package.json
"dependencies": {
...
"vue-router": "^2.1.1"
...
},
如果是要安装在开发环境下,则使用以下命令行:
npm install vue-router --save-dev
package.json
"devDependencies": {
...
"vue-router": "^2.1.1",
...
},
二、SPA中路由的简单实现(附demo)
下面让我们来配置路由并实现我们的第一次页面跳转。
官方提供的demo很简单,复制到HTML中也的确能跑,但是问题是不知道如何在SPA应用中使用,这坑了我不少时间。在看了不少他人的项目后,完成了SPA路由的简单实现demo(基于vue-cli的webpack模板)。
main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Page01 from './components/page01'
import Page02 from './components/page02'
Vue.use(VueRouter)//全局安装路由功能
//定义路径
const routes = [
{ path: '/', component: Page01 },
{ path: '/02', component: Page02 },
]
//创建路由对象
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router
})
App.vue
<template>
<div id="app">
<router-link to="/">01</router-link>
<router-link to="/02">02</router-link>
<br/>
<router-view></router-view>
</div>
</template>
page01.vue
<template>
<div>
<h1>page02</h1>
</div>
</template>
page02.vue
<template>
<div>
<h1>page02</h1>
</div>
</template>
代码很简单,具体可以看下DEMO
实现步骤:
-
npm
安装vue-router
-
Vue.use(VueRouter)
全局安装路由功能 - 定义路径数组
routes
并创建路由对象router
- 将路由注入到Vue对象中
- 在根组件中使用
<router-link>
定义跳转路径 - 在根组件中使用
<router-view>
来渲染组件 - 创建子组件
三、路由的跳转
router-link
router-link
标签用于页面的跳转,简单用法如上demo
<router-link to="/page01">page01</router-link>
点击这个router-link
标签router-view
就会渲染路径为/page01
的页面。
注意:router-link
默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link
标签中写入不同标签元素,如下显示为button
按钮。
<router-link to="/04">
<button>to04</button>
</router-link>
router.push
下面我们通过JS代码控制路由的界面渲染,官方是写法如下:
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
那么问题来了,如果是全局注册的路由Vue.use(VueRouter)
,应该怎么写呢?
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
push方法其实和<router-link :to="...">
是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
router.replace
push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下
template
<router-link to="/05" replace>05</router-link>
script
this.$router.replace({ path: '/05' })
router.go
go方法用于控制history记录的前进和后退
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)
// 后退一步记录,等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数
四、路由的传参方式
在路由跳转的过程中会传递一个object,我们可以通过watch
方法查看路由信息对象。
watch: {
'$route' (to, from) {
console.log(to);
console.log(from);
},
},
console中看到的路由信息对象
{
...
params: { id: '123' },
query: { name: 'jack' },
...
}
这两个参数会在页面跳转后写在路径中,路径相当于/page/123?name=jack
1. params
其实这个params我还是有一些疑惑的,就比如下面的写法:
<router-link :to="{ path: '/05', params: { sex: 'hello param', sex2: 'hello param2' }, query: { name: 'hello query', name2: 'hello query2' }}">05</router-link>
传递过去的数据却没有包含params的数据。
{
...
params: {},
query: {
name: 'hello query',
name2: 'hello query2'
}
...
}
下面是我暂时调试成功的一些结论。
传递数据
在路由配置文件中定义参数
//命名路由&路由传参
{ name: 'com03', path: '/03/:sex', component: Page03 },
路径后面的/:sex
就是我们要传递的参数。
this.$router.push({ path: '/03/441'})
此时路由跳转的路径
http://localhost:8080/#/03/441
此时我们看到查看路由信息对象:
{
...
params: {
sex: '441'
}
...
}
获取数据
template
<h2> {{ $route.params.sex }} </h2>
script
console.log(this.$route.params.sex)
注:暂时我只发现在动态路由匹配中传入数据可以获取到params。而使用{ path: '/', params: { sex: '123' }, query: { ...}}
传递的数据使用没有传递给下一个页面组件。如果有使用成功的同学欢迎在留言,我会及时更正的。
2. query
query传递数据的方式就是URL常见的查询参数,如/foo?user=1&name=2&age=3
。很好理解,下面就简单写一下用法以及结果
传递数据
template
<router-link :to="{ path: '/05', query: { name: 'query', type: 'object' }}" replace>05</router-link>
script
this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
路径结果
http://localhost:8080/#/05?name=query&type=object
路由信息对象
{
...
query: {
name: "query",
type: "object"
}
...
}
获取数据
获取数据和params是一样的。
template
<h2> {{ $route.query.name }} </h2>
script
console.log(this.$route.query.type)
Vue.js学习系列项目地址
https://github.com/violetjack/VueStudyDemos
相关推荐
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪(Evan You)开发,旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的,但它们在实际应用中...
Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发,因其简单易学、高效灵活的特性,在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战",旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术,从而...
在《Vue.js 2 Web Development Projects》这本书中,读者可以期待学习到如何: 1. **搭建开发环境**:使用Vue CLI创建项目,配置基本的路由和状态管理。 2. **创建基础组件**:如按钮、表单元素,以及如何使用模板...
Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发并维护,以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料,...
Vue.js的设计理念是简洁、易用且高效,它旨在通过最小的学习曲线提供强大的功能,使得开发者能够快速构建交互式的用户界面。Vue.js的PDF文档通常会涵盖以下几个主要的知识点: 1. **基础概念**:Vue.js的基础包括...
Vue.js 是一款流行的轻量级前端JavaScript框架,用于构建用户界面。它以其声明式的数据绑定、组件化开发和简易的学习曲线而备受开发者喜爱。在这个"Vue.js前端开发实战-自测卷和课后习题答案"的压缩包中,包含了与...
Vue.js 是一款流行的前端JavaScript框架,用于构建用户界面。在这个“阶段五:Vue.js项目实战资料.zip”中,我们能够找到关于使用Vue.js进行实际项目开发的详细资源,特别是针对一个名为“黑马头条”的社交媒体项目...
2. Vue.js框架的选型理由:文档强调了Vue.js作为MVVM框架的诸多优点,比如数据双向绑定、单文件组件、清晰的生命周期以及学习曲线平滑。单文件组件模式使得每个组件都能独立拥有自己的模板、逻辑和样式,这有助于...
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本...
Vue.js是一种渐进式JavaScript框架,主要用于构建用户界面。它是由尤雨溪创建,并且是目前前端开发中非常流行的技术之一。Vue.js的面试题涉及到多个方面,包括路由管理、状态管理、组件通信、指令使用等,这些都是...
Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发并维护,因其易学易用、高效灵活的特点,在Web开发领域广受欢迎。Vue.js v2.6.12是该框架的一个版本,它继承了Vue的核心特性,并在前一版本的基础上进行了...
Vue.js是一种流行的、开源的JavaScript框架,用于构建用户界面,特别是在单页面应用程序(SPA)中。Vue.js的设计理念是简洁、灵活,同时提供强大的功能,让开发者能够更高效地构建可维护的前端应用。这份“Vue.js...
Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面,以其简洁、易学和高性能的特点深受开发者喜爱。IntelliJ IDEA,作为一款强大的Java开发集成环境,也提供了对Vue.js的支持,通过安装Vue.js插件,可以...
本资源"Learning Vue.js 2(pdf+epub+mobi+code_file).zip"包含了Vue.js 2的详细学习资料,包括四种格式的电子书以及源代码文件,旨在帮助用户深入理解和掌握Vue.js 2的核心概念和技术。 首先,"Learning Vue.js 2....
第2章“Vue数据绑定”是Vue.js的核心特性之一,讲解了如何使用`v-bind`指令将数据绑定到DOM元素,以及如何使用`v-on`指令处理事件。此外,还涵盖了计算属性和侦听器,它们是实现更复杂逻辑的关键。 在深入理解基础...
Vue.js 是一款轻量级的前端JavaScript框架,其核心设计理念是数据驱动和组件化。"vue.min.js" 文件是Vue.js的压缩版本,通常用于生产环境以提高网页加载速度。这个文件包含了Vue.js库的所有功能,但进行了压缩和优化...
Vue.js 是一个流行的开源JavaScript框架,专为构建用户界面而设计,尤其适合单页应用程序(SPA)。"Vue.js 渐进式框架 v2.7.16.zip" 提供的是Vue.js 2.7.16版本的源码和相关文档,这允许开发者深入理解其内部工作...
7. **路由系统**:Vue Router是Vue.js的官方路由库,它允许我们管理应用的导航,实现页面间的平滑过渡和状态管理。 8. **状态管理**:Vuex是Vue.js的应用状态管理工具,它提供一个中心化的存储仓库,让组件间共享和...