我似乎无法使用编程导航传递参数,路径发生变化但有一个空对象参数。
主文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
const Hello = { props: ['name'],
template: `<h1>Hello {{$route.params}} </h1>`,
};
const World = { template: `<h1>World</h1>`};
const routes = [
{ path: '/hello', component: Hello, props: true },
{ path: '/world', component: World }
];
const router = new VueRouter({
routes
});
Vue.use(VueRouter);
new Vue({
el: '#app',
router,
render: h => h(App)
});
应用程序
<template>
<div id="app">
{{ msg }}
<button @click="move">werwer</button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted() {
},
methods : {
move() {
this.$router.push({ path: '/hello', params: { name: 'Paul' } })
}
}
}
</script>
最佳答案
似乎这样做时,您必须使用命名路由。
所以以编程方式推送
this.$router.push({ name: 'hello', params: { name: 'Paul' }})
并在定义中
const routes = [
{ name: 'hello', path: '/hello/', component: Hello, props: true },
{ path: '/world', component: World }
];
关于parameters - Vue Router - 未传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49997895/