vue-router 路由基礎(chǔ)的詳解

更新時(shí)間：2017年10月17日 15:24:26 作者：webxiaoma

這篇文章主要介紹了vue-router 路由基礎(chǔ)的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下

vue-router 路由基礎(chǔ)的詳解

今天我總結(jié)了一下vue-route基礎(chǔ)，vue官方推薦的路由。

一、起步

HTML

<div id="myDiv">
 <h1>簡單路由</h1>
 <router-link to="/foo">Go to foo</router-link>  
 <router-link to="/bar">Go to bar</router-link>  

// 渲染出口
 <router-view></router-view>
</div>

創(chuàng)建模板（組件）：

(也可以用import 引入外部組件)

  var foo={template:"<p>我是foo 組件</p>"};
  var bar={template:"<p>我是bar 組件</p>"};

組件注入路由：

var routes = [
   {path:'/foo',component:foo},
   {path:'/bar',component:b ar},
  ];

創(chuàng)建路由實(shí)例：

// 這里還可以傳入其他配置
const router = new VueRouter({
   routes   // （縮寫）相當(dāng)于 routes: routes; 
  });

注意這里 routes 沒有 ‘ r ' (不要寫成 routers)

創(chuàng)建vue實(shí)例（并掛載實(shí)例）

 var routerVue = new Vue({
   router
  }).$mount("#myDiv");

二、動(dòng)態(tài)路由匹配

有時(shí)候我們需要的是模板結(jié)構(gòu)一樣，當(dāng)時(shí)數(shù)據(jù)不一樣，就相當(dāng)于我們要把不同ID的登錄用戶連接到同一個(gè)頁面，但要顯示每個(gè)用戶的獨(dú)立信息，這時(shí)我們就用到了動(dòng)態(tài)路由匹配。

動(dòng)態(tài)路由主要用到了全局 $route.params 和路由的動(dòng)態(tài)參數(shù)，全局route 的 params API 存儲(chǔ)著路由的所有參數(shù)，路徑的參數(shù)用 “ ： ”來標(biāo)記：

HTML

<div id="myDiv">
// 點(diǎn)擊對(duì)應(yīng)鏈接時(shí)傳入對(duì)應(yīng)參數(shù)foo 和 bar
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</div>

const User = {
   template:'<p>我的ID是{{ $route.params.id }}</p>',
// 在路由切換時(shí)可以觀察路由
   watch:{
    '$route'(to,form){
     console.log(to); //要到達(dá)的
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
     {path:'/user/:id',component:User} // 標(biāo)記動(dòng)態(tài)參數(shù) id
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

三、嵌套路由

1.嵌套路由講的是我們可以在 <router-view>中去在渲染 <router-view> 這時(shí)要在配置路由時(shí)使用 children

例如：

HTML：

<div id="myDiv">
 <router-link to="/User/:foo">Go to foo</router-link> 
 <router-link to="/User/:bar">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS：

const User = {
   template:'<div><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></div>',
   }

   // 子路由
   const userChildOne = {
    template:'<div>我是 userChildOne</div>'
   }
   const userChildTwo = {
    template:'<div>我是 userChildTwo</div>'
   }
  const router = new VueRouter({
   routes:[
     {path:'/user/:id',component:User,
      children:[ // 用法和參數(shù)和routes 一樣
       {path:"/user/childone",component:userChildOne},
       {path:"/user/childtwo",component:userChildTwo}
      ]

     }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

四、命名路由

1.給路由命名指定路路由跳轉(zhuǎn)，要用到參數(shù)name 和 v-bind

HTML:

<div id="myDiv">
<!-- 要用v-bind 的綁定to -->
 <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
 <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS:

const User = {
   template:'<p>我的ID是{{ $route.params.userId }}</p>',
   watch:{
    '$route'(to,form){
     console.log(to);
     console.log(form);
    }
   }
  }

  const router = new VueRouter({
   routes:[
   // name 一一對(duì)應(yīng)上
     {path:'/user/:userId',name:"userOne",component:User},
     {path:'/user/:userId',name:"userTwo",component:User}
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

五、命名視圖

1.給渲染視圖 router-view 命名，來制定讓那個(gè)視圖渲染組件

HTML:

<div id="myDiv">
<!-- 要用v-bind 的綁定to -->
 <router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link> 
 <router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link> 
<!-- 視圖命名 如果不寫name 則為默認(rèn)為 default-->
  <router-view></router-view>
  <router-view name='b'></router-view>
</div>

JS：

// 四個(gè)模板
  const UserA = {
   template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
  }
  const UserB = {
   template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
  }
  const UserC = {
   template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
  }
  const UserD = {
   template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
  }
  const router = new VueRouter({
   routes:[
   // name 一一對(duì)應(yīng)上
     { 
      path:'/user/:userId',
      name:"userOne",
      components:{ // 注意這里為components 多個(gè)“ s ”
        default:UserA,
        b:UserB
      }
     },
     { 
      path:'/user/:userId',
      name:"userTwo",
      components:{
        default:UserD,
        b:UserC
      }
    }
   ]
  });

  var myVue = new Vue({
    router
  }).$mount("#myDiv")

六、重定向和別名

重定向和別名，首先我先來解釋一下什么叫做重定向和別名

『重定向』的意思是，當(dāng)用戶訪問 /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b，

『別名』 /a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。
重定向主要用參數(shù)：redirect 而別名主要用到參數(shù)： alias

HTML:

<div id="myDiv">
 <h2>效果查看地址欄最后面的變化</h2>
 <router-link to="/User/foo">Go to foo</router-link> 
 <router-link to="/User/bar">Go to bar</router-link> 
 <router-link to="/User/Car">Go to bar</router-link> 

  <router-view></router-view>
</div>

JS:

  const User = {
   template:'<p>我是同一個(gè)頁面</p>',
  }
  const router = new VueRouter({
   mode:"history",
   routes:[
     { path:'/User/foo',component:User},
     { path:'/User/bar',redirect: '/User/foo',component:User},
     // 重定向的目標(biāo)也可以是一個(gè)命名的路由：
     // 甚至是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)：

     // 別名設(shè)置
     { path:'/User/foo',alias: '/User/Car'}

   ]
  });

  var myVue = new Vue({ 
    router
  }).$mount("#myDiv")

如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: