<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<script src="../vue-router2.1.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/user/01">QQ登录</router-link>
<router-link to="/user/02">微信登录</router-link>
</p>
<router-view></router-view>
</div>
<script>
/*一个路径参数使用冒号:标记.当匹配到一个路由时,参数值会被设置到this.$route.params,
可以在每个组件内使用.于是,我们可以更新User模板,输出当前的Id*/
var User = {
template: `<div>User {{$route.params.id}}</div>`
}
const router = new VueRouter({
routes: [{
path: "/user/:id",
component: User
}]
})
const vm = new Vue({
router //router:router
}).$mount("#app")
</script>
</body>
</html>