Vue Router:使用 props 将组件和路由解耦

在组件中使用 $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,来访问路由参数。

原文地址:https://www.cnblogs.com/sea-breeze/p/11322902.html

时间: 2024-10-08 02:13:10

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

二、Vue Router 提供的标签组件

router-link 声明式导航组件标签 支持用户在具有路由功能的应用中(点击)导航.通过to属性指定目标地址,默认渲染成<a>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的CSS类名.默认是: router-link-active,可以全局配置激活类名,也可以属性的形式设置单个元素的激活类名. 将激活 class 应用在外层元素 外层元素必须是其他标签,<a>标签将作为真实的链接,而激活时的CSS类名则设置到外层的标签元素上

vue组件、路由、事件

目录 定义Vue组件 组件定义 组件化和模块化的不同 组件中展示数据和响应事件 使用components属性定义局部子组件 组件切换 使用flag标识符结合v-if和v-else切换组件 使用:is属性来切换不同的子组件,并添加切换动画 父子组件传值 父组件向子组件传值 子组件向父组件传值 使用 this.$refs 来获取元素和组件 路由 什么是路由 在 vue 中使用 vue-router 在路由规则中定义参数 使用 children 属性实现路由嵌套 命名视图实现经典布局 watch监听属

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

Vue Router 路由守卫:完整的导航解析流程

完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). 5 在路由配置里调用 beforeEnter. 6 解析异步路由组件. 7 在被激活的组件里调用 beforeRouteEnter. 8 调用全局的 beforeResolve 守卫 (2.5+). 9 导航被确认. 10 调用全局的 afterEach 钩子. 11 触发 DOM 更新. 12 用

初识vue 2.0(2):路由与组件

1,在上一篇的创建工程中,使用的的模版 webpack-simple 只是创建了一个简单的demo,并没有组件和路由功能,此次采用了webpack模版,自动生成组件和路由.^_^ 在模版初始化时,因为ESLint语法检查过于严格,可以暂时不要开启. vue init webpack myapp ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? Ye

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

04 Vue Router路由管理器

路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发. Vue Router包含的功能有: 支持HTML5 历史模式或hash模式 支持嵌套路由 支持路由参数 支持编程式路由 支持命名路由 vue-router的基本使用 基本使用步骤 1.引入相关的库文件 导入vue文件为全局window对象挂载Vue构造函数

vue组件级路由钩子函数介绍

正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 同样可以注册一个全局的 after 钩子,不过它不像 be

九、Vue Router 进阶-路由元信息meta

路由元信息 meta 在路由列表中,每个路由都有一个 meta元数据字段,我们可以在这里配置一些自定义信息,供页面组件或路由钩子函数中使用.在路由跳转的时候,提供我们判断条件. <script> // 配置 meta 数据 const router = new VueRouter({ routes: [ { path: '/', name: 'index', // 路由名称 component: index, // 映射的组件 meta: { title: '首页' } } ] }); <