前提说明,在学习vue的时候,尽量的以官网的为主,而且框架本身与官方文档都是在不断迭代更新的。

在vue的框架中,目前都是使用vue-router 来进行页面跳转的,而不是<a>。先贴一个vue-router学习的官方文档   https://router.vuejs.org/zh-cn/essentials/getting-started.html

事实上,使用vue-router  进行页面跳转一共有3种方式。这里我就先用一个demo进行说明一下。

一、demo准备工作:自己先按照官网的说明  用webpack搭建 vue-cli  脚手架   网址:https://vuejs-templates.github.io/webpack/  。搭建后运行 npm run dev  ,在浏览器页面成功出来就可以了。

踩坑说明:要及时升级版本!!!,这个版本包括,node版本,npm版本,vue版本,vue-cli版本,在全局安装vue-cli时会自动默认安装webpack的最新版本。

因为不同的版本会导致你安装的vue-cli会有些细微的差异。这对于开发vue有经验的人说影响不大,因为代码原理一样,目的一样,使用方式不同而已。但是对于初学者会很致命,会绕很多弯路

先贴出demo源码  链接:https://pan.baidu.com/s/1LIVX1G4EMN6joV1vDSTODg 密码:boiw

然后,为了更好的说明问题,

src/components里面创建以下文件

src/router/router.js文件修改如下

 import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import home from '@/components/home'
import page01 from '@/components/page01'
import page02 from '@/components/page02' import page01A from '@/components/page01/page01-A'
import page01B from '@/components/page01/page01-b'
import pageEnd from '@/components/page01/B/end' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/home',
name: 'home',
component: home
},
{
path: '/page01',
name: 'page01',
component: page01,
children: [
{
path: 'page01-a',
name: 'page01A',
component: page01A
},
{
path: 'page01-b',
name: 'page01B',
component: page01B,
children: [
{
path: 'end',
name: 'pageEnd',
component: pageEnd
}
]
}
]
},
{
path: '/page02',
name: 'page02',
component: page02
}
]
})

方法一、使用js编程的方式进行页面跳转。然后下面红框是修改部分。

在src/main.js里,给vue的原型链添加一个跳转的函数,在往后需要跳转的页面,点击后调用这个函数即可

方法二、通过router-link实现跳转

像我这样,直接渲染出来的是a标签的。这种试用于不用做各种校验直接跳转的情况下使用

参考博文:https://www.cnblogs.com/wisewrong/p/6277262.html

    https://www.jb51.net/article/127676.htm

vue学习 ---- 使用vue-router 进行跳转的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  6. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  7. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  8. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  9. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

  10. Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

随机推荐

  1. JSTL获取list的大小

    转自:https://blog.csdn.net/buster2014/article/details/45789647 JSTL获取list的大小,jstl获取list 的长度,EL表达式获取lis ...

  2. 关于Jenkins的网站及其他学习的网站

    配置efk https://www.cnblogs.com/fzxiaomange/p/efk-getstart.html https://blog.csdn.net/wangmuming/artic ...

  3. Shell05--函数应用

    目录 Shell05---函数应用 1. 函数基本概述 2. 函数基本使用 3. 函数参数传递 4. 函数状态返回 5. 函数场景示例 Shell05---函数应用 1. 函数基本概述 01. 什么是 ...

  4. nginx部署静态资源

    第一步.推荐使用EditPlus中ftp工具 安装,然后点击File->FTP->FTPUPLOAD->Settings->add.然后进行配置: 这样只是为了方便编辑Linu ...

  5. 初学Java 使用输入对话框

    import javax.swing.JOptionPane; public class ComputeLoanUsingInputDialog { public static void main(S ...

  6. Linux防火墙--iptables--白名单配置

    1.服务器22端口和1521端口开通给指定IP [root@node2 sysconfig]# iptables -t filter -nL INPUT Chain INPUT (policy ACC ...

  7. categorical_crossentropy VS. sparse_categorical_crossentropy

    From:https://jovianlin.io/cat-crossentropy-vs-sparse-cat-crossentropy/ categorical_crossentropy 和 sp ...

  8. web安全—tomcat禁用WebDAV或者禁止不需要的 HTTP 方法

    现在主流的WEB服务器一般都支持WebDAV,使用WebDAV的方便性,呵呵,就不用多说了吧,用过VS.NET开发ASP.Net应用的朋友就应该 知道,新建/修改WEB项目,其实就是通过WebDAV+ ...

  9. html5 图片360旋转

    test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. CentOS7 安装xen(在虚拟机上成功,实体机测试死机!)

    此文章只做操作记录,其中有些地方可能漏了!!我只贴出自己的操作过程!其它有差别的地方请自己网上查找参考! 只有在全虚拟化下才能安装Windows,这就需要有硬件支持,并在BIOS中开启Virtuali ...