- 什么是传递参数呢?
从一个组件传递到另一个界面的过程之中,是需要我们传递一些参数的,最开始渲染的肯定是App.vue, 首页被渲染,从app.vue,往用户组件里面一些东西。 - 准备工作:
第一步:创建新的组件profile.vue
profile => 配置动态路由 - 传递参数主要有两种类型:
配置路由的格式: /router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径: router/123, /router/abc - query的类型:
配置路由的格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递的方式
传递后形成的路径: /router?id=123, /router?id=abc
传递方式一演示:在path后面跟上对应的值
// 利用vue-router进行参数传递一:
import Vue from 'vue';
import Router from 'vue-router'
// 路由懒加载 => 优化首屏时间
const Home = () => import("../components/Home.vue");
const HomeNews = () => import("../components/HomeNews.vue");
const HomeMessage = () => import("../components/HomeMessage.vue");
const Profile = () => import("../components/Profile.vue");
const About = () => import("../components/About.vue");
const User = () => import("../components/User.vue")
// 1. Vue.use() 安装插件
Vue.use(Router);
// 2. 创建VueRouter对象
const routes = [
{
path: '',
redirect: '/home'
},
{
path: '/home',
component: Home,
children: [
{
path: '',
redirect: 'news'
},
{
path: 'news',
component: HomeNews
},
{
path: 'message',
component: HomeMessage
}
]
},
{
path: '/about',
component: About
},
{
path: '/user/:userId',
component: User
},
{
path: '/profile',
component: Profile
}
],
const router = new Router({
// 配置路由和组件的映射关系
routes
})
//3. 将router对象挂载到main.js
export default router
App.vue
<template>
<div id="home">
<router-link :to="/user'/' + useId"></router-link>
<router-link :to="{
path: '/profile', query: {name: 'why', age: 18, height: 1.88}
}"></router-link>
<router-view></router-view>
</div>
</template>
export default {
name: 'App',
data() {
return {
userId: "LiuMing"
}
}
}
User.vue
<template>
<div id='user'>
<h2>我是用户界面</h2>
<p>我是用户界面相关信息</p>
<h2>{{userId}}</h2>
<h1>{{$route.params.userId}}</h1>
</div>
</template>
<script>
export default {
name: 'User',
computed: {
userId() {
return this.$route.params.userId;
}
}
}
</script>
Profile.vue
<template>
<h2>我是一个profile组件</h2>
<h2>{$route.query}</h2>
<h2>{$route.query.name}</h2>
<h2>{$route.query.age}</h2>
<h2>{$route.query.height}</h2>
</template>
<script>
export default {
name: 'Profile'
}
</script>