本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
b988a8fd72e5e0e42afffd18f951b277 是用于 路由器的无刷新跳转
b988a8fd72e5e0e42afffd18f951b277 标签默认显示 Dom 为 3499910bf9dac5ae3c52d5ede7383485
<router-link to="/" class="nav-link">主页</router-link>
通过 tag 属性可以改变 如:
<router-link to="/" tag="p" class="nav-link">主页</router-link>
给 b988a8fd72e5e0e42afffd18f951b277 的属性 to 前加一个 冒号,再为其附上变量
下面的代码可以看出,to 的值是可以 随 homelink 变化,也就是说,我们可以通过自己设定的逻辑来影响 homelink 的值,以此改变 b988a8fd72e5e0e42afffd18f951b277 跳转方向
<router-link :to="homelink" tag="p" class="nav-link">主页</router-link> export default { data(){ return{ homelink:'/' } }, name: "Header" }
当用户输入 url 地址错误时,自动跳转到设定地址
在main.js 文件下的 路由器 配置项内加入
{path:'*',redirect:'/'}
const router= new VueRouter({ routes:[ {path:'/',component:Home}, {path:'/menu',component:Menu}, {path:'/admin',component:Admin}, {path:'/about',component:About}, {path:'/login',component:Login}, {path:'/register',component:Register}, {path:'*',redirect:'/'} //错误跳转处理 ,将跳转到 Home 组件 ], mode:"history" });
输入不存在的地址,页面会跳转到 Home 组件
在配置 路由时,为其赋予 name 属性,在b988a8fd72e5e0e42afffd18f951b277 中可作为地址
//main.js const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, name属性为 home {path:'/menu',name:'menu',component:Menu}, {path:'/admin',name:'admin',component:Admin}, {path:'/about',name:'about',component:About}, {path:'/login',name:'login',component:Login}, {path:'/register',name:'register',component:Register}, {path:'*',redirect:'/'} ], mode:"history" });
利用name属性指定 路由地址(to前面记得加 :号)
<ul class="navbar-nav"> <li><router-link :to="{name:'home'}" class="nav-link">主页</router-link></li> <li><router-link :to="{name:'menu'}" class="nav-link">菜单</router-link></li> <li><router-link to="admin" class="nav-link">管理</router-link></li> <li><router-link to="about" class="nav-link">关于我们</router-link></li> </ul>
//html <button @click="goToMenu" class="btn btn-success">Let`s order</button> //js export default { name: "Home", methods:{ goToMenu(){ //跳转到上一次浏览的页面 this.$router.go(-1); //指定跳转的地址 this.$router.replace('/menu') //指定跳转路由的名字下(路由name值) this.$router.replace({name:'menu'}); //通过 push 进行跳转(最常用) this.$router.push('/menu'); this.$router.push({name:'menu'}); } } }
相关推荐:
以上是Vue.js路由器的使用方法总结(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!