v-router路由参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">
</script>
<script type="text/javascript">
// 3、让Vue 使用VueRouter创建
// Vue.use(VueRouter);
var UserParams = {
template: `
<div>我是用户1</div>
`,
// 当引入vue-router时 会抛出两个全局对象 挂载到Vue实例化对象
created() {
console.log(this.$router); // this.$router(它就是VueRouter)
// 获取传过来的id值 可以拿着这个id去向后端发起请求获取响应数据
console.log(this.$route.params.id); // this.$route(配置路由信息对象)
},
};
var UserQuery = {
template: `
<div>我是用户2</div>
`,
};
// 4、创建router对象
// 路由范式
// 1)xxxx.html#user/1 params 动态路由参数
// 2)xxxx.html#/user?userId=1 query 参数查询
var router = new VueRouter({
// 5、配置路由对象
routes: [
// 路由匹配的规则
{
// 动态路由参数 以冒号开头
path: '/user/:id',
component: UserParams,
// 给当前路由命名
name: 'userP',
},
{
path: '/user',
component: UserQuery,
name: 'userQ',
},
]
});
// 引入vue-router模块后 会抛出两个全局组件
// 1)router-link 相当于a标签,里面的to属性相当于href属性
// 2)router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的)
var App = {
template: `
<div>
<!--绑定to属性 通过路由名字匹配对应的组件-->
<router-link :to='{name:"userP",params:{id:1}}'>用户1</router-link>
<router-link :to='{name:"userQ",query:{userid:2}}'>用户2</router-link>
<router-view></router-view>
</div>
`,
}
new Vue({
el: '#app',
data() {
return {
}
},
components: {
App
},
// 6、交给Vue实例化对象管理
router: router,
template: `
<App/>
`,
});
</script>
</html>
总结