這篇文章帶給大家的內容是關於Vue.js路由器的使用方法總結（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
<router-link to="/" class="nav-link">主页</router-link>
登入後複製
# 屬性可以改變如：
<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"
});//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中文網其他相關文章！
