Vue.js路由器的使用方法总结（附代码）

来源：动视网责编：小采时间：2020-11-27 19:32:00

Vue.js路由器的使用方法总结（附代码）

Vue.js路由器的使用方法总结（附代码）:本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<router-link> 是用于路由器的无刷新跳转改变<router-link> 标签默认显示标签<router-

推荐度：

点击下载本文 文档为doc格式

导读Vue.js路由器的使用方法总结（附代码）:本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<router-link> 是用于路由器的无刷新跳转改变<router-link> 标签默认显示标签<router-

本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<router-link> 是用于路由器的无刷新跳转

改变<router-link> 标签默认显示标签

<router-link> 标签默认显示 Dom 为 <a>

<router-link to="/" class="nav-link">主页</router-link>

通过 tag 属性可以改变如：

<router-link to="/" tag="p" class="nav-link">主页</router-link>

<router-link>动态绑定地址

给 <router-link> 的属性 to 前加一个冒号，再为其附上变量

下面的代码可以看出，to 的值是可以随 homelink 变化，也就是说，我们可以通过自己设定的逻辑来影响 homelink 的值，以此改变 <router-link> 跳转方向

<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 属性

在配置路由时，为其赋予 name 属性，在<router-link> 中可作为地址

//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'});
 }
 }
 }