客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 编程式路由传参除了使用 1. 通过 params 传递路由配置 路径参数 用冒号
const routes = [
// 动态段以冒号开始
{ path: 'details/:id', name: "details", component: Details },
]
const Home = {
template: '<div @click="toDetails">To Details</div>',
metheds: {
toDetails() {
// 字符串路径
this.$router.push('/details/001')
// 带有路径的对象
this.$router.push({path: '/details/001'})
// 命名路由，路由配置时，需要 name 字段
this.$router.push({ name: 'details', params: { id: '001' } })
}
}
}
注意，如果提供了
// `params` 不能与 `path` 一起使用
router.push({ path: '/details', params: { id: '001' } }) // -> /details
组件获取数据 当一个路由被匹配时，它的 params 的值将在每个组件中以
const Details = {
template: '<div>Details {{ $route.params.id }} </div>',
created() {
// 监听路由变化
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
// 对路由变化做出响应...
}
)
},
}
2. 通过 query 传递这种情况下 路由配置 使用
this.$router.push('/details/001?kind=car')
this.$router.push({ path: '/details/001', query: { kind: "car" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
组件获取数据组件通过
const Details = {
template: '<div>Details {{ $route.query.kind }} </div>',
created() {
// 监听路由变化
this.$watch(
() => this.$route.query,
(toParams, previousParams) => {
// 对路由变化做出响应...
}
)
},
}
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch 3. 通过 hash 传递通过此方式，url 路径中带有 路由配置 使用
this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
组件获取数据组件通过
const Details = {
template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}
通过 props 进行传递在组件中使用 以解耦的方式使用 1. 布尔模式 当 例如下面的代码是通过
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]
将上面的代码替换成
const User = {
props: ['id'], // 组件中通过 props 获取 id
template: '<div>User {{ id }}</div>'
}
// 路由配置中，增加 props 字段，并将值 设置为 true
const routes = [{ path: '/user/:id', component: User, props: true }]
注意：对于有命名视图的路由，你必须为每个命名视图定义
const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
// 为 User 提供 props
props: { default: true, sidebar: false }
}
]
2. 对象模式 当 路由配置
const routes = [
{
path: '/hello',
component: Hello,
props: { name: 'World' }
}
]
组件中获取数据
const Hello = {
props: {
name: {
type: String,
default: 'Vue'
}
},
template: '<div> Hello {{ name }}</div>'
}
3. 函数模式 可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。 路由配置 使用函数模式时，返回 props 的函数接受的参数为路由记录
// 创建一个返回 props 的函数
const dynamicPropsFn = (route) => {
return { name: route.query.say + "!" }
}
const routes = [
{
path: '/hello',
component: Hello,
props: dynamicPropsFn
}
]
组件获取数据当 URL 为
const Hello = {
props: {
name: {
type: String,
default: 'Vue'
}
},
template: '<div> Hello {{ name }}</div>'
}
此时页面将渲染： 注意：请尽可能保持 其他方式1. 通过 Vuex 进行传递 1. store 存储状态； 2. 通过前端本地存储等方式 1. Local Storage; 到此这篇关于Vue 路由组件传参的 8 种方式的文章就介绍到这了,更多相关Vue 路由组件传参内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论