文档章节

Vue的路由(三)

SingularD
 SingularD
发布于 2017/08/10 11:30
字数 377
阅读 1
收藏 0

编程式路由:

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)

声明式路由 编程式路由
<router-link to="..."> $router.push("name")

 

那么我们新建一个组件,对比两种方式的路由:首先是声明式路由:

test.vue:

<template>
  <div>
    <router-link to="/Title">标题</router-link>
    <router-link to="/Image">图片</router-link>
    <router-link to="/newTest">跳转到新的组件</router-link>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<style>
</style>
<script>
export default {
  name: 'test'
}
</script>

index.js:

    

import Vue from 'vue'
import Router from 'vue-router'
import test from './../components/test'
import Title from './../components/Title'
import Image from './../components/Image'
import newTest from './../components/newTest.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: test
    },
    {
      path: '/title',
      name: 'title',
      component: Title
    },
    {
      path: '/image',
      name: 'image',
      component: Image
    },
    {
      path: '/newTest',
      name: 'newTest',
      component: newTest
    }
  ]
})

newTest.vue:

<template>
    <div>
      这是一个新的组件
    </div>
</template>
<style>
</style>
<script>
export default {
  name: 'newTest'
}
</script>

第二种:编程式路由:

test.vue:

<template>
  <div>
    <router-link to="/Title">标题</router-link>
    <router-link to="/Image">图片</router-link>
    <router-link to="/newTest">跳转到新的组件</router-link>
    <button v-on:click="jump">跳转到新组件</button>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<style>
</style>
<script>
export default {
  name: 'test',
  methods: {
    jump: function () {
      this.$router.push('/newTest')
    }
  }
}
</script>

两种方法实现的效果都一样:

© 著作权归作者所有

SingularD
粉丝 2
博文 17
码字总数 6512
作品 0
成都
程序员
私信 提问
Vue中路由管理器Vue Router使用介绍(三)

一、路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 在js中使用: 二、路由链接使用 1.使用router-link 定义跳转链接 2.使用js跳转 更多示例: 也可以使用 三、动态注册...

tianma3798
2018/10/17
0
0
Vue element 表格获取选中项操作

一、在使用element table表格时,获取选中项处理 1.视图 2.js 更多: Vue element 二级菜单绑定示例 Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐...

tianma3798
2018/10/18
0
0
Vue element 二级菜单绑定示例

一、element ui 中动态绑定二级菜单示例 1.视图绑定 显示结果: 更多: Vue中路由管理器Vue Router使用介绍(三) Vue中路由管理器Vue Router使用方式(二)-推荐 Vue中路由管理器Vue Route...

tianma3798
2018/10/18
0
0
vue.js之使用Vue CLI开发多页面应用

简要说明 Vue CLI是一个基于Vue.js进行快速开发的完整系统,是vue-cli的升级版,除含有快速搭建Vue项目的脚手架外还有许多实用功能,vue ui是个亮点,官方详细文档传送门。 一、安装Vue CLI...

louieSun
2018/10/09
0
0
Vue学习笔记之vue-cli项目搭建及解析

(一)安装node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csd...

逆袭的小菜鸟
2017/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Redox OS 发布 0.5 版

Redox OS 是一个几乎完全以 Rust 语言编写的通用操作系统及周围生态(例如文件系统、显示服务器及 Rust 版本的 libc)。其遵循微内核架构,在一定程度上兼容于 POSIX。 该项目于日前发布了 ...

linuxCool
41分钟前
1
0
更新上传git/gitee项目时出现密码配置错误(incorrect username or password)的解决办法

1.输入【git remote add origin git地址】 命令时出现incorrect username or password的错误,这是因为之前弹出输入账户和密码时输错了,而且会一直默认错误的账户和密码,因此需要把之前输入...

west_coast
48分钟前
0
0
Jenkins基础入门-1-Jenkins简单介绍和环境安装

如果在做自动化测试的朋友,应该熟悉Jenkins,或者至少使用过。如果一个人没有使用过Jenkins或者hudson,hudson是Jenkins的前身,他还说自己做过自动化测试,只能说,他只不过是在做半自动化...

shzwork
48分钟前
0
0
linux上解压版安装jdk,tomcat

需要的安装包 1.vmware12 2.centos7版本 3.安装完成后需要xshell来连接远程虚拟机,虚拟机保证要联网,网络畅通。 4.xftp用来向linux传输文件用,一般来说xshell和xftp配套使用 5.对应的压缩...

architect刘源源
今天
27
0
使用 spring 的 IOC 解决程序耦合

工厂模式解耦 在实际开发中我们可以把三层的对象都使用配置文件配置起来,当启动服务器应用加载的时候,让一个类中的方法通过读取配置文件,把这些对象创建出来并存起来。在接下来的使用的时...

骚年锦时
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部