你好,阅读文章的大哥,vue路由都会用吧!但是你知道路由如何写才能保证多路由模块解耦,保证更方便增加新的路由模块吗?
加一个5级标题再说明一下:为什么要路由解耦?
(请认真读完这些话)
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
对路由参数的改变不需要通过this.
r
o
u
t
e
去
获
取
了
,
而
是
通
过
p
r
o
p
s
来
获
取
,
解
决
通
过
w
a
t
c
h
监
听
route去获取了,而是通过props来获取,解决通过watch监听
route去获取了,而是通过props来获取,解决通过watch监听route和通过beforeRouteUpdate传值时通过$route.params获取参数改变时麻烦的写法:
只适用于pramas,不适用于query;
实现方式:
1.在路由的配置项加一个props:true;
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
}
]
});
2.在需要接收路由参数的组件中通过props进行接收,例如:pros:[“属性”,“属性”]
<template>
<div>{{id}}</div>
</template>
<script>
export default {
name: "user",
props: ["id"]
};
</script>
3.效果
User 组件通过输入属性,就能访问路由参数。不需要再通过this.$route.params,来访问路由参数。