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

た入场券 2021-11-22 21:38 175阅读 0赞

上次我们学习了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://www.cnblogs.com/gcghcxy/p/10998157.html

发表评论取消回复

表情：

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

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

相关阅读

相关 vue.js学习笔记（五）--axios中取消请求

> 博客：[https://fisher-zh.github.io/][https_fisher-zh.github.io] 在平时的开发过程中，我们会经常遇到菜单切换的问题

「爱情、让人受尽委屈。」/ 2022年06月11日 00:07/ 0 赞/ 1154 阅读

相关 Vue学习笔记五

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

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

相关 Vue学习之源码分析--VNode节点(Vue.js实现（五）

抽象DOM树在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以

偏执的太偏执、/ 2022年06月07日 11:23/ 0 赞/ 357 阅读

相关 Vue学习笔记（一）——Vue与angularJS比较分析

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 虚拟dom映射到真实dom的机制不同

小咪咪/ 2022年04月23日 11:18/ 0 赞/ 268 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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