Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)

栏目: 编程语言 · 发布时间: 7年前

内容简介:Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)

想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。

注意:

一、路由的安装:

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

实现步骤:

  1. npm 安装 vue-router

  2. Vue.use(VueRouter) 全局安装路由功能

  3. 定义路径数组 routes 并创建路由对象 router

  4. 将路由注入到Vue对象中

  5. 在根组件中使用 <router-link> 定义跳转路径

  6. 在根组件中使用 <router-view> 来渲染组件

  7. 创建子组件

三、路由的跳转

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学习系列

Vue.js学习系列项目地址(项目暂时有点乱,之后会进行整理优化。)

本文源码已收入到GitHub中,以供参考,当然能留下一个star更好啦^-^。

https://github.com/violetjack...

关于作者

VioletJack,移动、前端工程师,两年移动端工作经验、一年前端工作经验。现专注于移动前端的学习和开发。擅长Android开发和Vue前端开发。会定期产出关于Android、Vue、移动前端相关的博文。欢迎大家关注我,我会用心维护和经营好博客,多产出高质量文章。同时也希望我所写的东西可以帮到有需要的朋友。

新浪微博: http://weibo.com/u/2640909603

掘金: https://gold.xitu.io/user/571...

CSDN: http://blog.csdn.net/violetja...

简书: http://www.jianshu.com/users/...

Github: https://github.com/violetjack


以上所述就是小编给大家介绍的《Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

哥德尔、艾舍尔、巴赫

哥德尔、艾舍尔、巴赫

[美] 侯世达 / 严勇、刘皓明、莫大伟 / 商务印书馆 / 1997-5 / 88.00元

集异璧-GEB,是数学家哥德尔、版画家艾舍尔、音乐家巴赫三个名字的前缀。《哥德尔、艾舍尔、巴赫书:集异璧之大成》是在英语世界中有极高评价的科普著作,曾获得普利策文学奖。它通过对哥德尔的数理逻辑,艾舍尔的版画和巴赫的音乐三者的综合阐述,引人入胜地介绍了数理逻辑学、可计算理论、人工智能学、语言学、遗传学、音乐、绘画的理论等方面,构思精巧、含义深刻、视野广阔、富于哲学韵味。 中译本前后费时十余年,......一起来看看 《哥德尔、艾舍尔、巴赫》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试