此案例包含一级路由，路由前置守卫，props正向传值等知识点，
基本功能是：用户未登录，踢回登录页面，点击新闻列表，跳转相应新闻详情
相关代码如下：
需要下载vue和vue-router
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="node_modules/vue/dist/vue.min.js"></script><script src="node_modules/vue-router/dist/vue-router.min.js"></script><style>a{margin-left:5px;text-decoration: none;}</style>
</head>
<body><div id="demo"><!-- 父传子 在子组件被调用的时候传入值 --><com :obj="arr"></com><router-view></router-view></div><template id="tema"><div><p>首页</p></div></template><template id="temb"><div><div v-for="(v,i) in news"><router-link :to="{name:'detail',params:{id:v.id}}">{{v.title}}</router-link></div></div></template><template id="temc"><div><h1>{{text[0].title}}</h1><p>{{text[0].con}}</p></div></template><template id="temd"><div><p>登录</p></div></template><template id="tem"><div><span v-for="(v,i) in obj"><router-link :to="v.linkurl">{{v.title}}</router-link></span></div></template><script>var tema={template:"#tema"};var temb={template:"#temb",data(){return{news:[{id:1,title:"新闻1",con:"1111111111"},{id:2,title:"新闻2",con:"2222222222"},{id:3,title:"新闻3",con:"3333333333"},{id:4,title:"新闻4",con:"4444444444"}]}}};var temc={template:"#temc",data(){return{news:[{id:1,title:"新闻1",con:"1111111111"},{id:2,title:"新闻2",con:"2222222222"},{id:3,title:"新闻3",con:"3333333333"},{id:4,title:"新闻4",con:"4444444444"}],text:[]}},created(){&#ws.filter((v,i)=>{if(v.id==this.$route.params.id){ws[i];}})}};var temd={template:"#temd"};var routes=[{name:"index",path:"/index",component:tema},{name:"list",path:"/list",component:temb},// 1.params传参 配置路由规则{name:"detail",path:"/detail/:id",component:temc},{name:"login",path:"/login",component:temd}]var router=new VueRouter({routes})// 路由前置守卫router.beforeEach((to,from,next)=>{if(to.path=="/index"){alert("请您登录后访问^^");next("/login");}else{next();}})new Vue({el:"#demo",data:{arr:[{linkurl:"/index",title:"首页"},{linkurl:"/list",title:"新闻列表"},{linkurl:"/detail",title:"新闻详情"},{linkurl:"/login",title:"登录"}]},methods:{},router,components:{"com":{template:"#tem",props:{obj:{type:Array,required:true}}}}})</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="node_modules/vue/dist/vue.min.js"></script><script src="node_modules/vue-router/dist/vue-router.min.js"></script><style>a{margin-left:5px;text-decoration: none;}</style>
</head>
<body><div id="demo"><com></com><router-view></router-view></div><template id="tema"><div><p>首页</p> </div></template><template id="temb"><div><div v-for="(v,i) in news"><router-link :to="{name:'detail',params:{id:v.id}}">{{v.title}}</router-link></div></div></template><template id="temc"><div><h1>{{text[0].title}}</h1><p>{{text[0].con}}</p></div></template><template id="temd"><div><p>登录</p> </div></template><template id="tem"><div><router-link v-for="(v,i) in arr" :to="v.linkurl">{{v.title}}</router-link></div></template><script>var tema={template:"#tema"}var temb={template:"#temb",data(){return{news:[{id:1,title:"新闻1",con:"哈哈哈哈哈哈哈哈哈"},{id:2,title:"新闻2",con:"呵呵呵呵呵呵呵呵呵"},{id:3,title:"新闻3",con:"嘻嘻嘻嘻嘻嘻嘻嘻嘻"},{id:4,title:"新闻4",con:"呃呃呃呃呃呃呃呃呃"}]}}}var temc={template:"#temc",data(){return{news:[{id:1,title:"新闻1",con:"哈哈哈哈哈哈哈哈哈"},{id:2,title:"新闻2",con:"呵呵呵呵呵呵呵呵呵"},{id:3,title:"新闻3",con:"嘻嘻嘻嘻嘻嘻嘻嘻嘻"},{id:4,title:"新闻4",con:"呃呃呃呃呃呃呃呃呃"}],text:[]}},created(){&#ws.filter((v,i)=>{if(v.id==this.$route.params.id){ws[i];}})} }var temd={template:"#temd"}var routes=[{name:"index",path:"/index",component:tema},{name:"list",path:"/list",component:temb},// params传参 配置路由规则{name:"detail",path:"/detail/:id",component:temc},{name:"login",path:"/login",component:temd}]var router=new VueRouter({routes})// 路由前置守卫router.beforeEach((to,from,next)=>{if(to.path=="/index"){alert("请您登录后访问^^");next("/login");}else{next();}})new Vue({el:"#demo",data:{},methods:{},router,components:{"com":{template:"#tem",data(){return{arr:[{linkurl:"/index",title:"首页"},{linkurl:"/list",title:"新闻列表"},{linkurl:"/detail",title:"新闻详情"},{linkurl:"/login",title:"登录"}]}}}}})</script>
</body>
</html>复制该代码，可以直接运行。
本文发布于:2024-01-28 02:14:30，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063792784060.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
