VUE在组件中获取路由信息⼀、核⼼代码
1、获取参数
this.$route.query.id
this.$route.query
2、页⾯跳转
<router-link to="/login?id=123">登录</router-link>
3、⽅法跳转
this.$router.push({ path: '/login', query: { id: '456' } });
⼆、全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>-->
<script src="unpkg/vue/dist/vue.js"></script>
<script src="unpkg/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="components-demo">
<component-a></component-a>
<router-link to="/login?id=123">登录</router-link>
<router-link to="/register">注册</router-link>
<button v-on:click="fn1">测试点击调整页⾯</button>
<router-view></router-view>
</div>
<script type="text/javascript">
// 组件的局部注册
var ComponentA = {
data: function () {// 组件的数据
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'// 组件的模板
};
var Component_login = {
template: '<h2>登录----{{$route.query.id}}------{{id}}-----{{name}}</h2>',
data: function () {
return {
name: 'name1',
//id: this.$route.query.id// 获取url参数，这个不可以⽤，不是实时的
};
},
computed: {
id: function () {
return this.$route.query.id// 计算属性的获取url参数，这个可以⽤
}
},
created() {
console.log(this.$route.query)
},
};
var Component_register = { template: '<h1>Component2</h1>' };
// 路由
var routerObj = new VueRouter({
routes: [
{ name:'login', path: '/login', component: Component_login },
{ name:'register', path: '/register', component: Component_register }            ]
})
new Vue({
el: '#components-demo',
components: {
'component-a': ComponentA,
react router 跳转'component-1': Component_login,
'component-2': Component_register
},
router: routerObj,
methods: {
fn1: function () {// 跳转页⾯
//this.$router.push({ name: 'login', query: { id: '456' } });
this.$router.push({ path: '/login', query: { id: '456' } });
}
}
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。