您当前的位置: 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
路由参数
发布时间:2020-03-02 00:15:12编辑:雪饮阅读()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var user={
data:function(){
return{
user:''
}
},
template:`<div>{{user}}</div>`,
created(){
//当前路由对象
console.log("this.$route",this.$route);
//当前路由对象所在的路由对象集合
console.log("this.$router",this.$router);
this.user="用户"+this.$route.params.id;
}
};
var user2={
data:function(){
return{
user2:''
}
},
template:`<div>{{user2}}</div>`,
created(){
console.log("this.$route",this.$route);
console.log("this.$router",this.$router);
this.user2="用户"+this.$route.params.id;
}
};
var router=new VueRouter({
//两种不同的path匹配方式
routes:[
{
//进入该路由则触发访问路径类似为"/user/1"
path:'/user/:id',
name:'user',
component:user
},
{
//进入该路由则固定触发访问路径为“/user2”不带参的,但是若在:to处有传参数,则在组件处仍然还是可以接收到参数的
path:'/user2',
name:'user2',
component:user2
}
]
});
var App = {
template:`<div class='app'>
<router-link :to ="{name:'user',params:{id:1}}">用户1</router-link>
<router-link :to ="{name:'user2',params:{id:2222}}">用户2</router-link>
<router-view></router-view>
</div>`,
};
//挂载路由对象
new Vue({
el: '#app',
router:router,
template: `<App />`,
components:{App}
});
</script>
</body>
</html>
关键字词:vue,路由参数
上一篇:router命名路由
下一篇:嵌套路由(子路由)