vue项目实现页面跳转的方法

目录
  • 1.创建一个vue-cli默认项目(仅包含babel)
  • 2.进入创建文件
  • 3.检查配置
  • 4.创建views文件夹
  • 5.设置APP.vue
  • 6.进行main.js的配置
  • 7.运行结果

问题描述：

vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转。

实验结果与讨论 ：

1.创建一个vue-cli默认项目(仅包含babel)

2.进入创建文件

以管理员身份进入创建的文件路径内，并运行命令npm install vue-router –save

（如果已经安装好淘宝镜像可运行cnpm install vue-router–save）

3.检查配置

在package.json里可以进行检查到是否已经成功配置vue-router。

4.创建views文件夹

新建一个views文件夹，并在该文件夹下新建home.vue,about.vue两个组件

5.设置APP.vue

如下设置：

<template>

<div id="app">

<div id="nav">

<router-link to="/">home</router-link> |

<router-link to="/about">about</router-link>

</div>

<router-view/>

</div>

</template>

<style>

#app {

text-align: center;

margin-top: 60px;

}

</style>

6.进行main.js的配置

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: () => import( './views/About.vue')

}

]

})

7.运行结果

如下：

问题 总结 ：

在本次的实验中，通过cmd命令提示符中安装vue-router，并配置router.js实现页面跳转功能。虽然已经成功实现简单的页面跳转功能，但是并未将router.js中的定义路由、定义组件等阐述清楚，后续将进行研究页面跳转功能。

到此这篇关于vue项目实现页面跳转的方法的文章就介绍到这了,更多相关vue项目实现页面跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 使用vuex在页面跳转的实现方式

    vue 使用vuex在页面跳转的实现方式

    目录 vue 使用vuex在页面跳转 第一种方式:使用 router 动态路由传参,将需要的数据带过去 第二种方式:使用vuex vuex 页面跳转参数存储获取 vue中我们用于页面跳转有三种方式 首先需要 接收页面 vue 使用vuex在页面跳转 学习时候碰到的需求场景:我的音乐列表,点击一个音乐项跳转到音乐详情页 第一种方式:使用 router 动态路由传参,将需要的数据带过去 音乐列表页组件: 音乐详情页组件: 音乐列表页通过selectSong方法传参,在音乐详情页的挂载完成里面将数据赋

  • vue 页面跳转的实现方式

    一.this.$router.push() 1.vue <template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div> </template> 2.script //跳转前页面传参数: goTo(item) { //storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面 let storageData = { searc

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    背景 在项目开发过程中,经常会遇到从上一个页面跳转到下一个页面的需求,俗称 下钻 .比如在概览页面的数据,需要查看详情,点击某个图表或按钮,即可跳转到详情页面查看详情数据. 目前为止,我们的项目中还没有一个统一的页面跳转方法,实现页面跳转的方式也因人而异,并且现有的很多项目只能在两个页面之间来回跳转,基本没有完整的实现多个页面互相跳转的功能. 关联页面跳转做为项目的常用功能,并且执行的都是重复性高的代码逻辑,非常有必要把相关的逻辑抽出来,封装成简单易用的公共方法和公共组件. 目的 统一各个项目的

  • Vue页面跳转传递参数及接收方式

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页 一.配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla

  • Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函

  • vue实现token过期自动跳转到登录页面

    这几天项目提测,测试给我提了个bug,说token过期,路由应该自动跳转到登陆页面,让用户重新登录.先说下一些前置条件, 1:我公司的token时效在生产环境设置为一个小时,当token过期,所有接口都直接返回 2:每次路由跳转都会对token进行判断,设置了一个全局的beforeEach钩子函数,如果token存在就跳到你所需要的页面,否则 就直接跳转到登录页面,让用户登录重新存取token 接口返回的信息 { code:10009, msg:'token过期', data:null } 全局

  • vue项目实现页面跳转的方法

    vue项目实现页面跳转的方法

    目录 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 3.检查配置 4.创建views文件夹 5.设置APP.vue 6.进行main.js的配置 7.运行结果 问题描述: vue-router是前端开发中用来实现路由页面跳转的一个模块.下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转. 实验结果与讨论 : 1.创建一个vue-cli默认项目(仅包含babel) 2.进入创建文件 以管理员身份进入创建的文件路径内,并运行命令npm instal

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • vue项目中使用骨架屏的方法

    vue项目中使用骨架屏的方法

    现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA.MPA等,那么解决页面渲染.白屏时间成为首要关注的点 webpack可以按需加载,减小首屏需要加载代码的体积: 使用CDN技术.静态代码等缓存技术,可以减小加载渲染的时长 问题:但是首页依然存在加载.渲染等待时长的问题.那么如何从视觉效果上减小首屏白屏的时间呢? 骨架屏:举个例子:其实就是在模版文件中id=app容器下面写想要展示的效果,在new Vue(option)之后,该id下的内容就被替换了( 这时候,可能Vue编译生成的内容

  • 三种asp.net页面跳转的方法

    第一种方法:response.redirect 这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但它可以跳转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录保护.但速度慢是其最大缺陷!redirect跳转机制:首先是发送一个http请求到客户端,通知需要跳转到新页面,然后客户端在发送跳转请求到服务器端.需要注意的是跳转后内部空间保存的所有数据信息将会丢失,所以需要用到session. 代码如下  using System; using Syst

  • vue axios 在页面切换时中断请求方法 ajax

    如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • 在vue项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 2.在当前目录下,安装依赖 $ cd myvue $ npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    1.在百度地图申请密钥: http://lbsyun.baidu.com/  将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的 密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

随机推荐