詳解vue路由

更新時(shí)間：2020年08月05日 11:42:01 作者：卐空羽流雲(yún)卍

這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識(shí)，感興趣的朋友可以了解下

前端路由和后端路由：

后端路由：對(duì)于普通的網(wǎng)站，所有的超鏈接都是url地址，所有url都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源
前端路由：對(duì)于單頁面應(yīng)用程序來說，主要通過url的hash（#）來實(shí)現(xiàn)不同頁面的切換，同時(shí)hash還有一個(gè)特點(diǎn)HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容，所以單頁面程序中的頁面跳轉(zhuǎn)主要用hash實(shí)現(xiàn)

在單頁面應(yīng)用程序中這種通過hash來改變頁面的方式稱作前端路由區(qū)別于后端路由

路由的使用

1.創(chuàng)建一個(gè)路由對(duì)象，當(dāng)導(dǎo)入vue-router包之后，在window全局對(duì)象中就有一個(gè)路由的構(gòu)造函數(shù)VueRouter

2.在new路由對(duì)象的時(shí)候可以傳遞一個(gè)配置對(duì)象，這個(gè)配置對(duì)象的route表示路由器的匹配規(guī)則

3.每個(gè)路由規(guī)則都是一個(gè)對(duì)象，這個(gè)規(guī)則對(duì)象身上必須有兩個(gè)屬性

屬性1 path表示監(jiān)聽哪個(gè)路由鏈接地址
屬性2 component，表示如果路由是前面匹配到的path，則展示component屬性對(duì)應(yīng)的組件，component屬性值必須是一個(gè)組件模板對(duì)象，不能是組件的引用名稱

var login={
      template:'<h2>登錄</h2>'
    }
    var register={
      template:'<h2>注冊(cè)</h2>'
    }
    var routerObj=new VueRouter({
      routes:[
        {path:'/login',component:login},
        {path:'/register',component:register}

      ]
    })

4.router:routerObj將路由規(guī)則對(duì)象注冊(cè)到VM實(shí)例上，用來監(jiān)聽URL地址的變化，然后展示對(duì)應(yīng)的組件

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

5.在控制的div中使用

<router-view></router-view>

6.在搜索欄輸入對(duì)應(yīng)的匹配規(guī)則，login

7.使用vue官方提供的router-link元素使用，它默認(rèn)渲染為一個(gè)a標(biāo)簽

<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>

路由重定向

1.設(shè)置一個(gè)默認(rèn)展示組件，不推薦

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

2.路由redirect重定向，設(shè)置默認(rèn)組件

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

路由傳參

1.如果使用查詢字符串給路由傳遞參數(shù)則不需要修改路由規(guī)則的path屬性

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

2.使用query傳遞參數(shù)

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

3.通過params方式傳遞路由參數(shù)，login后面會(huì)被解析為id的值

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

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

{path:'/login/:id',component:login},

路由的嵌套

使用children屬性實(shí)現(xiàn)路由嵌套,子路由path前不要加/，否則永遠(yuǎn)以根路徑開始請(qǐng)求

    <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">注冊(cè)</router-link>
        <router-view></router-view>
      </div>
    </template>

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

命名視圖

命名視圖在components（這時(shí)會(huì)多個(gè)s）后加屬性再在使用<router-view></router-view>的時(shí)候用name引入,可以使一個(gè)頁面中存在多個(gè)路由

      <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路由的詳細(xì)內(nèi)容，更多關(guān)于vue路由的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: