1. 程式人生 > >vue-router 路由基礎簡單介紹

vue-router 路由基礎簡單介紹

今天我總結了一下vue-route基礎,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> 
  1. 建立模板(元件):
    (也可以用import 引入外部元件)
   var foo={template:"<p>我是foo 元件</p>"};
   var bar={template:"<p>我是bar 元件</p>"};
  1. 元件注入路由:
var routes = [
      {path:'/foo',component:foo},
      {path:'/bar',component:b ar},
   ];
  1. 建立路由例項:
// 這裡還可以傳入其他配置
const router = new VueRouter({
      routes     // (縮寫)相當於 routes: routes; 
});

注意這裡 routes 沒有 ‘ r ’ (不要寫成 routers)

  1. 建立vue例項(並掛載例項)
   var routerVue = new Vue({
      router
   }).$mount("#myDiv"); 

二、動態路由匹配

有時候我們需要的是模板結構一樣,當時資料不一樣,就相當於我們要把不同ID的登入使用者連線到同一個頁面,但要顯示每個使用者的獨立資訊,這時我們就用到了動態路由匹配。
動態路由主要用到了全域性 $route.params 和路由的動態引數,全域性route 的 params API 儲存著 路由的所有引數,路徑的引數用 “ : ”來標記:

HTML

<div id="myDiv">
// 點選對應連結時傳入對應引數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> 

JS

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

    const router = new VueRouter({
      routes:[
         {path:'/user/:id',component:User}  // 標記動態引數 id
      ]
    });

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

三、巢狀路由

1.巢狀路由講的是我們可以在 <router-view>中去在渲染 <router-view> 這時要在配置路由時使用 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:[  // 用法和引數和routes 一樣
              {path:"/user/childone",component:userChildOne},
              {path:"/user/childtwo",component:userChildTwo}
           ]

         }
      ]
    });

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

四、命名路由

1.給路由命名指定路路由跳轉,要用到引數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 一一對應上
         {path:'/user/:userId',name:"userOne",component:User},
         {path:'/user/:userId',name:"userTwo",component:User}
      ]
    });

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

五、命名檢視

1.給渲染檢視 router-view 命名,來制定讓那個檢視渲染元件
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 則為預設為 default-->
   <router-view></router-view>
   <router-view name='b'></router-view>
</div> 

JS:

// 四個模板
    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 一一對應上
         { 
            path:'/user/:userId',
            name:"userOne",
            components:{ // 注意這裡為components 多個“ s ”
               default:UserA,
               b:UserB
            }
         },
         { 
            path:'/user/:userId',
            name:"userTwo",
            components:{
               default:UserD,
               b:UserC
            }
        }
      ]
    });

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

六、重定向 和 別名

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

『重定向』的意思是,當用戶訪問 /a時,URL 將會被替換成 /b,然後匹配路由為 /b,

『別名』 /a 的別名是 /b,意味著,當用戶訪問 /b 時,URL 會保持為 /b,但是路由匹配則為 /a,就像使用者訪問 /a 一樣。/a 的別名是 /b,意味著,當用戶訪問 /b 時,URL 會保持為 /b,但是路由匹配則為 /a,就像使用者訪問 /a 一樣。

重定向主要用引數:redirect 而別名主要用到引數: 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>我是同一個頁面</p>',
    }
    const router = new VueRouter({
      mode:"history",
      routes:[
         { path:'/User/foo',component:User},
         { path:'/User/bar',redirect: '/User/foo',component:User},
         // 重定向的目標也可以是一個命名的路由:
         // 甚至是一個方法,動態返回重定向目標:

         // 別名設定
         { path:'/User/foo',alias: '/User/Car'}

      ]
    });

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