<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/js/vue.js"></script>
<script src="../lib/js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 如果在路由中使用查询字符串给路由传递参数，则不需要修改路由规则的path属性
可以传多个参数：id name-->
<router-link to="/login?id=10&name=sa">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
const login = {
template:'<h1>登录 - - -{{ $route.query.id }} - - - {{ $route.query.name }}</h1>',
// created(){ //组件的生命周期钩子函数
// // console.log(this.$route);
// // console.log(this.$route.query.id)
// }
};
const register = {
template:'<h1>注册</h1>'
};
const routerObj = new VueRouter({
routes:[
{ path:'/login',component:login },
{ path:'/register',component:register}
]
});
const vm = new Vue({
el:'#app',
data:{},
methods:{},
router:routerObj
})
</script>
</body>
</html>
Day4.6路由传参query方式
猜你喜欢
转载自www.cnblogs.com/zhaohui-116/p/12241478.html
今日推荐
周排行