Vue中的路由

 

 

訪問不同的路徑，就可以返回不同的結果（不同的組件） 
前端自己處理頁面跳轉都是兩種方式：

• hash模式：開發時使用hash，不會導致404錯誤，但是不支持SEO
• h5中的history.pushState：上線采用h5的跳轉

VUE中的路由： 
[安裝]

• 1、在要使用路由的項目中打開CMD命令 輸入npm install vue-router,安裝vue的路由模塊
• 2、在頁面中先引入vue.js,再引入vue-router.js，因為vue-router是基於vue的

[使用]

• 1、聲明創建路由表，在路由表中將路徑和對應的組件關聯起來
• 2、初始化路由並傳入路由表
• 3、在vue的實例中注冊路由

router-view（全局組件：用來將路由渲染到頁面上）

• 4、在頁面中使用router-view這個全局組件來將路由渲染到頁面上

 let home={template:'<div>首頁</div>'};
 let list={template:'<div>列表頁</div>'};
//1、創建路由表：routes為路由的映射表 配置路徑和組件的關系（名字最好用routes）
 let routes=[
        //路徑前必須加 ‘/’
        {path:'',component:home},//默認展示的路由（默認展示的不需要加/）
        {path:'/home',component:home},//一個路徑對應一個組件
        {path:'/list',component:list},
        {path:'*',redirect:'/home'}//用戶隨便輸入路徑時，重定向到home組件，防止出現404
 ];
//2、初始化路由（名字最好用router）
 let router=new VueRouter({//初始化路由：傳入路由表
        routes:routes//路由中提供的路由表屬性名就是routes所以可以簡寫如下
        routes
 });
//3、在vue實例中注冊路由，之后就可以在頁面中使用了
 let vm=new Vue({
        el:'#app',
        router//注冊路由（此處為簡寫方式，理由同上邊路由表的簡寫方式）
 })
 //4、頁面中使用router-view這個全局組件來將路由渲染到頁面上
 <div id="app">
    <router-view></router-view>
 </div>

router-link（全局組件，用來實現點擊跳轉，相當於按鈕）

• 5、使用router-link全局組件，來實現點擊跳轉 
  router-link存在兩個屬性：
• to：跳轉到哪個（必須加，值為要跳轉的路徑）
• tag：要把router-link變為哪個標簽（不改默認是a標簽）

 

//修改上面的HTML如下
  <div id="app">
      <router-link to="/home" tag="button">首頁</router-link>
      <router-link to="/list" tag="button">列表頁</router-link>
      <router-view></router-view>
  </div>

頁面返回與跳轉的方法

當在vue的實例中注冊過路由之后，每個組件上都會有一個名叫$router的對象，還有一個叫做$route的對象；

$router：存儲了跳轉的方法

• 組件.$router.push()：強制跳轉到某個路徑，參數為路徑
• 組件.$router.replace()：路由替換，將當前路徑替換為新的路徑（很少用到）
• 組件.$router.go()：返回某一級，參數為返回多少級（-1為上一級，1為下一級）

$route：存儲了很多需要的參數

只要路徑改變了，$route值就會改變,可以通過watch方法監聽$route屬性，根據路徑的不同來發送ajax請求獲取到不同的數據

• 組件.$route.params：值是一個對象，存儲了路徑匹配之后的值 

//由於路徑有很多，而我們不能把路徑寫死，所以要寫成類似正則的形式來匹配路徑
 /article/2/d //一個路徑
 /article/:c/:a //表示路徑匹配，和上面的匹配后產生一個對象，存在$route.params當中：{c:2,a:d}

路由的嵌套

可在路由表中嵌套二級路由，嵌套二級路由的一級路由的template也要做對應的修改；

<div id="app">
      <router-link to="/home">首頁</router-link>
      <router-link to="/detail">詳情頁</router-link>
      <router-view></router-view><!--一級路由顯示區域-->
  </div>
  <template id="detail">
      <div>
          <router-link to="/detail/info">個人中心</router-link>
          <router-link to="/detail/about">關於我</router-link>
          <router-view></router-view><!--二級路由顯示區域-->
      </div>
  </template>

 //組件
    let home={template:'<div>home</div>'};
    let detail={template:'#detail'};
    let info={template:'<div>info</div>'};
    let about={template:'<div>about</div>'};
    //創建路由表
    let routes=[
        {path:'/home',component:home},
        {
            path:'/detail',
            component:detail,
            //二級路由寫在childern屬性當中
            children:[
       //二級以及二級以上路由的路徑永遠不帶‘/’，如果帶‘/’代表是一級路由
                {path:'info',component:info},
                {path:'about',component:about}
            ]
        },
    ];
    //初始化路由並傳入路由表
    let router=new VueRouter({routes});
    let vm=new Vue({
        el:'#app',
        //注冊路由
        router
    })