vue.js - vue动态添加路由获取不到query
本文介绍了vue.js - vue动态添加路由获取不到query的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请看代码 /UserProfile 本来是没有query参数的，我动态添加了，但是获取确是undefined ？？？？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/UserHome">UserHome</router-link>
<router-link to="/UserProfile">UserProfile</router-link>
<button type="button" @click='addPath()'>添加一个路由</button>
<button type="button" @click='getQuery()'>获取query</button>
</p>
<router-view></router-view>
</div>
</body>
</html>
<script>
const UserHome = { template: '<div>UserHome</div>' }
const UserProfile = { template: '<div>UserProfile</div>' }
const routes = [
{
path:'/UserHome',
component:UserHome
},
{
path:'/UserProfile',
component:UserProfile,
}
];
const router = new VueRouter({
routes
})
const app = new Vue({
router ,
methods:{
addPath(){
router.push({
path:'/UserProfile',
query:{name:'123'}
})
},
getQuery(){
console.log(router.query)
}
}
}).$mount('#app')
</script>解决方案
getQuery(){
console.log(this.$route.query)
}这样就获取到了
这篇关于vue.js - vue动态添加路由获取不到query的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
