vue升级之路之vue-router的使用教程

使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生

在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选择是否安装 vue-router，大家注意一下就行了

一、路由的配置

自动安装的vue-router，会在src 文件夹下有个一个 router -> index.js 文件 在 index.js 中创建 routers 对象，引入所需的组件并配置路径

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

然后在main.js里面引入router文件

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

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

关于 HTML5 history 模式的更多内容，可以自行度娘

二、嵌套路由

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

其中 是用来渲染通过路由映射过来的组件，当路径更改时， 中的内容也会发生更改

上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/index的时候，就会在 中渲染 index.vue 组件 index.vue 是真正的父组件，其它的子组件都会渲染到 index.vue 中的

想要在一级路由中实现嵌套二级路由，就要修改 router -> index.js

在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套。 配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 需不需要添加 " / " 就要看个人需求了

三、使用 映射路由

如果只需要跳转页面，不需要添加验证方法的情况，可以使用 来实现导航的功能：

<router-link class="item" to="/index/login" >{{ text }}</router-link>
 <router-link class="item" :to="{path:url, query:data}" >{{ text }}</router-link>

在编译之后， 会被渲染为 标签， to 会被渲染为 href，当 被点击的时候，url 会发生相应的改变

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

如果需要传入不同参数 ，可以在路由中添加动态参数，给 to 传入一个对象

{
 path: item.url,
 query: { id: '007' }
}

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

四、编程式导航

然而在实际项目下，有很多链接在执行跳转之前，还会执行方法对数据进行处理，这时可以使用 this.$router.push(location) 来修改 url 完成跳转

// 绑定goLogin
<button class="login" @click="goLogin"></button>
// 定义goLogin
methods: {
    goLogin() {
      this.routes.push('/login')
    }
  },

push 后面可以是对象，也可以是字符串：

// 字符串
this.$router.push('/index')
// 对象
this.$router.push({ path: '/index' })
// 命名的路由
this.$router.push({ name: 'login', params: { userId: '123' }})
赞 (0)

相关推荐

  • 解决vue router使用 history 模式刷新后404问题

    因为我们的应用是单页客户端应用,当使用 history 模式时,URL 就像正常的 url,可以直接访问http://www.xxx.com/user/id,但是因为vue-router设置的路径不是真实存在的路径,所以刷新就会返回404错误. 想要history模式正常访问,还需要后台配置支持.要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面. 也就是在服务端修改404错误页面的配置路

  • vue router-link传参以及参数的使用实例

    vue router-link传参以及参数的使用实例

    1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id">跳转</ro

  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    不好意思,标题比较啰嗦,因为这次的流水账确实属于一个比较细节的小东西,下面详细讲: 1需求 最近在使用electron-vue开发一个跨平台的桌面端软件,刚上手写了几个页面,遇到一个问题:桌面端软件通常会有导航需求,类似下图 导航按钮 点击返回按钮,返回上一页,并且显示上页内容.其实不止App,即使普通的网页中也会有此类需求,尤其是使用vue写SPA时. 项目中的导航几乎都是采用router.push({name: 'xxx', params: {xxx:123...}})这种方式.这种方式导致

  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

  • vue router2.0二级路由的简单使用

    本文实例为大家分享了vue router2.0二级路由的具体代码,供大家参考,具体内容如下 1.app.vue中 <template> <div id="app"> <router-view></router-view> </div> </template> 2.router中index.js(路由的路径配置) import Vue from 'vue' import Router from 'vue-router

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • vue-router 导航钩子的具体使用方法

    vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 全局钩子 1.router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 每个钩子方法接收三个参数: to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function:

  • vue升级之路之vue-router的使用教程

    使用 Vue 构建的项目,一个页面是由多个组件构成的,而且经常是做成单页面应用,所以在跳转页面的时候,传统的 href 已经跟不上时代的步伐了,于是 vue-router 应运而生 在使用 vue-router 的时候,需要看看自己是否装了这个依赖,没有的话可以使用 npm install vue-router -S ,不过现在构建vue项目时有可以选择是否安装 vue-router,大家注意一下就行了 一.路由的配置 自动安装的vue-router,会在src 文件夹下有个一个 router

  • vue项目创建步骤及路由router

    vue项目创建步骤及路由router

    1.创建一个vue项目步骤 (windows环境下).创建vue项目前,检查系统是否具备创建项目的条件(是否已经安装好了node.js.webpack.vue-cli).cmd打开终端. 1.1 如果还没安装node.js, 则先安装node.js,安装完成后,查看node版本 node -v 1.2 安装淘宝镜像, 安装完成后查看npm版本:npm -v npm install -g cnpm --registry=https://registry.npm.taobao.org 1.3 安装w

  • Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码

    根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├

  • Vue 进阶之路（三）

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 compited 和监听器 watch. 现在我们有一个需求,变量 firstName = "hello",变量 lastName = "world",我们需要将这两个变量拼接到在前端展示,最基本的我们可以想到的就是: <!DOCTYPE html> <html lang="en"> <head>

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • vue 使用axios 数据请求第三方插件的使用教程详解

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 •浏览器端发起XMLHttpRequests请求 •node端发起http请求 •支持Promise API •监听请求和返回 •转化请求和返回 •取消请求 •自动转化json数据 •客户端支持抵御 安装 使用npm: $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据,导致请求参数无法传递到后台,所以还需要安装一个插件QS $ npm install qs

  • vue项目搭建以及全家桶的使用详细教程(小结)

    前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程:对于刚开始解除vue的新手,建议使用官方脚手架vue-cli,当然,如果你对于webpack很熟悉,你也可以自己动手搭建自己的脚手架,当然如果你没把握的话,还是推荐使用vue-cli,能更好的帮助你搭建项目: 步骤一.安装vue-cl

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • Vue脚手架搭建及创建Vue项目流程的详细教程

    Vue脚手架搭建及创建Vue项目流程的详细教程

    目录 VUE脚手架搭建流程 安装国内淘宝镜像 安装 Vue 脚手架 Vue项目创建 项目结构解读 项目修改测试 总结 VUE脚手架搭建流程 1.安装 Node.js(推荐一个网站:http://nodejs.cn/) 2.下载安装完成之后进行测试,记住安装位置 node -v 测试 node 是否安装成功以及检查 node 版本 npm -v 测试 npm 是否安装成功以及检查 npm 版本 效果: 提示:如果碰到下面情况 可能原因: 可能是C:\Users\Administrator(user

随机推荐