<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!--1.安装vue-router路由模块-->
<script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
</head>
<div id="app">
<p>{{message}}</p>
<!--如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则path属性-->
<router-link to="/login?id=123" tag="span">登录</router-link>
<router-link to="/register/liliang">注册</router-link>
<router-view></router-view>
</div>
</body>
<script>
let login={
template:'<h1>登陆组件{{$route.query.id}}</h1>',
created(){//组件的生命周期钩子函数
console.log(this.$route);
console.log(this.$route.query.id);
}
}
let register={
template:'<h1>注册组件{{$route.params.name}}</h1>'
}
let routerObj=new VueRouter({
routes:[
{path:"/",redirect:'/login'},
{path:'/login',component:login},
{path:'/register/:name',component:register}
],
linkActiveClass:'myactive'
});
let app=new Vue({
el:'#app',
data:{
message:'Hello World'
},
router:routerObj
})
</script>
</html>
