好程序员教程分析Vue学习笔记五

好程序员教程分析Vue学习笔记五，上次我们学习了Vue的组件，这次我们来学习一下路由的使用。在Vue中，所谓的路由其实跟其他的框架中的路由的概念差不多，即指跳转的路径。

注意：在Vue中，要使用路由，必须导入vue-router.js，并且需要在vue.js下方导入。

具体示例如下：

<router-link to="/view1">视图一</router-link>

<router-link to="/view2">视图二</router-link>

<router-view></router-view>

</div>

// 1. 定义路由组件

var t1 = {template: "<div>hello, view1</div>"}

var t2 = {template: "<div>hello, view2</div>"}

// 2. 定义路由规则

var routes = [

{path:"/view1", component: t1},

{path:"/view2", component: t2}

];

// 3. 构建路由

var router = new VueRouter({routes:routes});

// 4. 绑定路由

var v = new Vue({

router: router

}).$mount("#content");

</script>

分析如下：

在页面标签中，需要视图触发的事件链接标签<router-link>。然后需要一个切换页面的显示视图标签。<router-view>

js代码中，首先定义路由组件，即页面需要显示的具体内容。然后定义规则即哪个链接触发哪个具体内容的显示。再次需要将上面定义的规则构建成一个vue中的路由对象。最后将定义好的路由对象绑定到当前vue视图中。

若链接中需要传参，可以如下操作：

<router-link :to="{path:'/view1', query:{name:'leon'}}">视图一</router-link>

相当于/view1?name=leon

好程序员教程分析Vue学习笔记五相关推荐

【168天】黑马程序员27天视频学习笔记【Day07】
[168天]黑马程序员27天视频学习笔记[Day07] 叨逼叨两句决定了,我会记住这一天! 07-01:构造方法Constructor概述和格式构造方法概述和作用给对象的数据(属性)进行初始化. ...
程序员面试笔试宝典学习笔记（一）
以下是一些著名互联网企业的部分面试笔试真题以及考察知识点本文的内容是对一些网址上的知识点介绍做了相应的整理 1.extern的作用自己理解:应该需要区分extern在C语言中和C++语言中的作用, ...
哔哩哔哩黑马程序员C++课程个人学习笔记
写在前面:此博文仅作为个人c++学习笔记,或有错误不建议参考!!! 视频链接:黑马程序员c++教程从0到1 目录一.第一部分c++基础 1.1 c++初识 1.1.1 hello world 1.1 ...
【C++】黑马程序员-C++核心编程学习笔记
前言根据黑马程序员C++课程内容,结合讲义,将自己学习C++的过程中将自己觉得有必要记下的笔记进行整理,方便复习回顾,编程环境为VSCode. 本阶段主要针对C++面向对象编程技术做详细讲解,探讨C ...
黑马程序员8日python学习笔记
黑马程序员的教程给小白的体验非常良好,讲的非常细致,甚至会介绍一下鼠标快捷键的设置,会提到一些新手很容易踩到的坑. 打开python win+R python 看到>>>(进入到解释 ...
黑马程序员--分布式搜索ElasticSearch学习笔记
写在最前黑马视频地址:https://www.bilibili.com/video/BV1LQ4y127n4/ 想获得最佳的阅读体验,请移步至我的个人博客 SpringCloud学习笔记消息队列M ...
程序员的自我修养学习笔记——第五章
PE: Portable Executable COFF: Common Object File Format 跟ELF一样,PE中也允许程序员将变量后函数放到自定义段.在GCC中使用"__ ...
程序员的自我修养——学习笔记1
文章目录计算机硬件早期计算机发展 SMP和多核计算机软件操作系统和设备驱动的作用文件系统存储设备未使用内存管理时解决思路:地址空间分段分页线程进程参考资料计算机硬件计算机 ...
《一个程序员的奋斗史》学习笔记
小说地址: https://blog.csdn.net/norains/column/info/novelnorains 故事梗概: 段fuli就是一届屌丝,他的梦想就是成为一名程序员.他来到深圳打拼 ...

好程序员教程分析Vue学习笔记五

好程序员教程分析Vue学习笔记五相关推荐

最新文章

热门文章