在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。

可以使用 props 将组件和路由解耦。

一 路由配置(布尔模式):

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import User from "./components/User.vue"; Vue.use(Router); export default new Router({
mode: "hash",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/user/:id",
component: User,
props: true
}
]
});

二 User组件

<template>
<div>{{id}}</div>
</template>
<script>
export default {
name: "user",
props: ["id"]
};
</script>

三 运行效果

User 组件通过输入属性,就能访问路由参数。不需要再通过this.$route.params,来访问路由参数。

Vue Router:使用 props 将组件和路由解耦的更多相关文章

  1. Vue.js 第4章 组件与路由

    组件 什么是组件:组件就是一些标签结构的封装,同时为这些结构添加需要的业务逻辑,设置你想要的样式 一个组件中一般可以设置:结构,功能和样式 为什么要使用组件: 使用方便 复用 组件的创建和使用 组件的 ...

  2. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  3. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  4. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  5. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  6. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  7. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  8. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. Docker数据目录相关操作

    数据目录挂载 我们可以在创建容器的时候,将宿主机的目录与容器内的目录进行映射,这样我们就可以通过修改宿主机某个目录的文件从而去影响容器.使用 -v 选项 docker run -id -v /宿主机绝 ...

  2. 2018-8-10-VisualStudio-修改配色

    title author date CreateTime categories VisualStudio 修改配色 lindexi 2018-08-10 19:16:52 +0800 2018-2-1 ...

  3. 13.解决SUSELinux用户登录Module is unknow问题

    问题原因: linux login:rootpasswd:Last login:Fri Jul 26 09:55:31 CST 2019 from 192.168.168.1 on pts.5You ...

  4. odoo ERP 系统安装与使用

    https://hub.docker.com/_/odoo/ #!/bin/bash sudo docker pull postgres:10sudo docker pull odoo:11.0 su ...

  5. 03python面向对象编程之Python中单下划线和双下划线的区别7

    通常Python类中会有_和__的方法,是指什么意思呢?如下: 双下划线表示内部不允许访问,一个下划线表示这样的实例变量外部是可以访问的,但是,按照约定俗成的规定,当你看到这样的变量时,意思就是,“虽 ...

  6. 2019 ACM/ICPC 全国邀请赛(西安)J And And And (树DP+贡献计算)

    Then n - 1n−1 lines follow. ii-th line contains two integers f_{a_i}(1 \le f_{a_i} < i)fai​​(1≤fa ...

  7. Spring MVC 使用MultipartResolver与Commons FileUpload传输文件

    配置MultipartResolver:用于处理表单中的file <!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver ...

  8. Django【第22篇】:基于Ajax实现的登录

    基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...

  9. python-抽象类和抽象方法

    需要模块  import abc 抽象类不能实例化 import abc class Animal(metaclass=abc.ABCMeta): #抽象类 @abc.abstractmethod # ...

  10. Python---Tkinter---计算器

    Python---Tkinter---计算器 - 模拟系统的计算器功能 - 实现一个简单的具有加减法等操作的计算器 - 使用tkinter - 操作步骤 - 画GUI - 给每个控件配置相应的事件 - ...