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

阳光穿透心脏的1/2处 2022-01-12 05:39 147阅读 0赞

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

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

具体示例如下：

<div id="content">

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

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

<router-view></router-view>

</div>

<script>

// 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

转载于:https://juejin.im/post/5cfe0bd6e51d4558936aa054

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js教程学习笔记

官方视频简易教程：https://learning.dcloud.io/ 1. 安装与部署第一阶段（初学）可以通过在html文件中引入脚本来完成安装 <sc

叁歲伎倆/ 2022年11月14日 13:18/ 0 赞/ 96 阅读

相关 Vue学习笔记五

v-model v-model在双向绑定的时候会忽视value，checked，selected特征的初始值。 v-model可以绑定的控件有textarea,che

r囧r小猫/ 2022年06月09日 11:23/ 0 赞/ 149 阅读

相关 TensorFlow快餐教程：程序员快速入门深度学习五步法

![这里写图片描述][70] > 作者简介：刘子瑛，阿里巴巴操作系统框架专家；CSDN 博客专家。工作十余年，一直对数学与人工智能算法相关、新编程语言、新开发方法等相关领域保

港控/mmm°/ 2022年05月23日 12:24/ 0 赞/ 173 阅读

相关 Vue学习笔记（五）——组件与实例

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 组件与实例定义的几个不同点： 1.

叁歲伎倆/ 2022年03月10日 14:40/ 0 赞/ 160 阅读

相关 vue官网学习笔记（五）条件渲染

v-if v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。 <h1 v-if="awesome">Vue is

向右看齐/ 2022年02月26日 03:50/ 0 赞/ 200 阅读

相关好程序员学习笔记：函数

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 一、函数具有某种特定功能的一段代码，函数简化了代码，提高了代码的复用性，增加了安全

╰+哭是因爲堅強的太久メ/ 2022年01月15日 07:43/ 0 赞/ 139 阅读

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

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

阳光穿透心脏的1/2处/ 2022年01月12日 05:39/ 0 赞/ 148 阅读

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

上次我们学习了Vue的组件，这次我们来学习一下路由的使用。在Vue中，所谓的路由其实跟其他的框架中的路由的概念差不多，即指跳转的路径。　　注意：在Vue中，要使用路由

た入场券/ 2021年11月22日 21:38/ 0 赞/ 149 阅读

相关【vue】学习笔记五：路由

文章目录 @\[TOC\] 路由在 vue 中使用 vue-router 设置路由高亮设置路由切换动效在路由规则中定义参数使用 \`children\`

悠悠/ 2021年09月21日 00:10/ 0 赞/ 312 阅读

相关 vue官方教程学习笔记 - 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范

悠悠/ 2021年09月19日 06:56/ 0 赞/ 315 阅读