首頁 >web前端 >js教程 >Vue.js路由器的使用方法總結(附程式碼)

Vue.js路由器的使用方法總結(附程式碼)

不言
不言原創
2018-08-23 16:21:131671瀏覽

這篇文章帶給大家的內容是關於Vue.js路由器的使用方法總結(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

b988a8fd72e5e0e42afffd18f951b277 是用於路由器的無刷新跳躍

#改變b988a8fd72e5e0e42afffd18f951b277 標籤預設顯示標籤

b988a8fd72e5e0e42afffd18f951b277 標籤預設顯示Dom 為3499910bf9dac5ae3c52d5ede7383485

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


透過

tag

# 屬性可以改變如:

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


b988a8fd72e5e0e42afffd18f951b277動態綁定位址

給b988a8fd72e5e0e42afffd18f951b277 的屬性to 前加一個冒號,再為其附上變數

下面的程式碼可以看出,to 的值是可以隨homelink 變化,也就是說,我們可以透過自己設定的邏輯來影響homelink 的值,以此改變b988a8fd72e5e0e42afffd18f951b277 跳轉方向

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



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }

 輸入位址輸入錯誤處理

#當使用者輸入url 位址錯誤時,自動跳到設定位址

在main.js 檔案下的路由器設定項目內加入

{path:&#39;*&#39;,redirect:&#39;/&#39;}
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:&#39;*&#39;,redirect:&#39;/&#39;}                  //错误跳转处理  ,将跳转到 Home 组件
  ],
  mode:"history"
});
輸入不存在的位址,頁面會跳到Home 元件

路由name 屬性 在設定路由時,為其賦予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:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});
利用name屬性指定路由位址(to前面記得加:號碼) 
        <ul class="navbar-nav">
          <li><router-link :to="{name:&#39;home&#39;}" class="nav-link">主页</router-link></li>
          <li><router-link :to="{name:&#39;menu&#39;}" 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(&#39;/menu&#39;)

            //指定跳转路由的名字下(路由name值)
            this.$router.replace({name:&#39;menu&#39;});

            //通过 push 进行跳转(最常用)
            this.$router.push(&#39;/menu&#39;);
            this.$router.push({name:&#39;menu&#39;});
          }
        }
    }
### 相關推薦:##########vue.js中路由器的設定方法介紹############ ###Vue.js###建構###路######由###錯誤如何解決? ######

以上是Vue.js路由器的使用方法總結(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn