本篇文章给大家带来的内容是关于Vue.js路由器的使用方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
<router-link to="/" class="nav-link">主页</router-link>
通过 tag 属性可以改变 如：
<router-link to="/" tag="p" class="nav-link">主页</router-link>
给
下面的代码可以看出，to 的值是可以 随 homelink 变化，也就是说，我们可以通过自己设定的逻辑来影响 homelink 的值，以此改变
<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 属性，在
//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中文网其他相关文章！
