詳解vue路由

阿新 • • 發佈：2020-08-06

前端路由和後端路由：

後端路由：對於普通的網站，所有的超連結都是url地址，所有url都對應伺服器上對應的資源
前端路由：對於單頁面應用程式來說，主要通過url的hash（#）來實現不同頁面的切換，同時hash還有一個特點HTTP請求中不會包含hash相關的內容，所以單頁面程式中的頁面跳轉主要用hash實現

在單頁面應用程式中這種通過hash來改變頁面的方式稱作前端路由區別於後端路由

路由的使用

1.建立一個路由物件，當匯入vue-router包之後，在window全域性物件中就有一個路由的建構函式VueRouter

2.在new路由物件的時候可以傳遞一個配置物件，這個配置物件的route表示路由器的匹配規則

3.每個路由規則都是一個物件，這個規則物件身上必須有兩個屬性

屬性1 path表示監聽哪個路由連結地址
屬性2 component，表示如果路由是前面匹配到的path，則展示component屬性對應的元件，component屬性值必須是一個元件模板物件，不能是元件的引用名稱

var login={
      template:'<h2>登入</h2>'
    }
    var register={
      template:'<h2>註冊</h2>'
    }
    var routerObj=new VueRouter({
      routes:[
        {path:'/login',component:login},{path:'/register',component:register}

      ]
    })

4.router:routerObj將路由規則物件註冊到VM例項上，用來監聽URL地址的變化，然後展示對應的元件

var vm=new Vue({
          el:'#div1',data:{
            
          },methods:{
            
            },router:routerObj  
          
        })

5.在控制的div中使用

<router-view></router-view>

6.在搜尋欄輸入對應的匹配規則，login

詳解vue路由

7.使用vue官方提供的router-link元素使用，它預設渲染為一個a標籤

<router-link to="/login">登入</router-link>
<router-link to="/register">註冊</router-link>

路由重定向

1.設定一個預設展示元件，不推薦

{path:'/',

2.路由redirect重定向，設定預設元件

{path:'/',redirect:'login'},

路由傳參

1.如果使用查詢字串給路由傳遞引數則不需要修改路由規則的path屬性

    <router-link to="/login?id=10">登入</router-link>

2.使用query傳遞引數

var login={
      template:'<h2>登入----{{$route.query.id}}</h2>'
    }

詳解vue路由

3.通過params方式傳遞路由引數，login後面會被解析為id的值

<router-link to="/login/12">登入</router-link>

var login={
      template:'<h2>登入----{{$route.params.id}}</h2>'
    }

{path:'/login/:id',

路由的巢狀

使用children屬性實現路由巢狀,子路由path前不要加/，否則永遠以根路徑開始請求

    <div id="div1"
      <router-link to="/account">account</router-link>
            <router-view></router-view>
    </div>
    <template id="tmp1">
      <div>
        <h2>account 元件</h2>
        <router-link to="/account/login">登入</router-link>
        <router-link to="/account/register">註冊</router-link>
        <router-view></router-view>
      </div>
    </template>

var router=new VueRouter({
        routes:[
          {path:'/account',component:account,children:[
            {path:'login',{path:'register',component:register}
          ]}
        ]
      })

命名檢視

命名檢視在components（這時會多個s）後加屬性再在使用<router-view></router-view>的時候用name引入,可以使一個頁面中存在多個路由

      <router-view></router-view>
      <router-view name="left"></router-view>
      <router-view name="main"></router-view>

var router=new VueRouter({
        routes:[
          {path:'/',components:{
            default:header,left:leftBox,main:mainBox
          }},]
      })

以上就是詳解vue路由的詳細內容，更多關於vue路由的資料請關注我們其它相關文章！