<!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.js"></script><script src="/node_modules/vue-router/dist/vue-router.js"></script><style>.active{font-weight: 600;color: red;}</style>
</head>
<body><div id="app"><ul><router-link tag="li" to="/position" active-class="active">一级菜单1</router-link><router-link tag="li" to="/search" active-class="active">一级菜单2</router-link></ul><router-view></router-view><!-- 定义一个方法 --><button @click="goLink">跳转到second</button></div><script>const position = {template:`<div><router-link to="/position/first" active-class="active">二级菜单1</router-link><router-link to="/position/second" active-class="active">二级菜单2</router-link><router-view></router-view></div>`}const search = {template:`<div>search</div>`}/* 这里配置我们的路由 */let router = new VueRouter({// mode:'hash',默认值//路由匹配一般会按顺序从上往下匹配routes:[{//这里也可以配置一下path:'/',redirect:'/position/second',},{path:'/position',component:position,redirect:'/position/second',children:[{path:'/position/first',component:{template:'<div>first</div>'}},{path:'/position/second',name:'secondcc',//命名式路由 这个name用作标识 可以随便起component:{template:'<div>second</div>'}},]},{path:'/search',component:search},{path:'*',//匹配一个404页,就是上面路由均匹配不到时component:{template:`<h1>404 page not found!</h1>`}}]})let vm = new Vue({router,el:'#app',methods:{goLink(){// this.$router.push('/position/second')// this.$router.push({// path:"/position/second"// })//命名式路由// this.$router.push({// name:"secondcc"// })//也可以这么写router.push({name:"secondcc"})}}})</script>
</body>
</html>
本文发布于:2024-02-02 08:04:15，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170683225442465.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
