vue-router路由簡單案例介紹

更新時間：2017年02月21日 16:15:57 作者：藝小晨

本篇文章主要介紹了vue-router路由的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

官方文檔：

舊版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn

新版：http://router.vuejs.org/（2.0版本）

此文是舊版

文件結(jié)構(gòu)圖：

基本用法：

<router-view>是一個頂級的路由外鏈，用于渲染匹配的組件。

例如：我的應(yīng)用入口是app.vue

那么在app.vue中添加如下代碼，此處涉及ES6。

app.vue

<template>
  <div class='page index-content'>
    <router-view class="view"
    keep-alive
    transition="slide"></router-view>
    <Footers></Footers>
  </div>
</template>
<script>
/*
*ES6模塊系統(tǒng)特性:
1.使用export關(guān)鍵詞導(dǎo)出對象。這個關(guān)鍵字可以無限次使用；
2.使用import關(guān)鍵字將其它模塊導(dǎo)入某一模塊中。它可用來導(dǎo)入任意數(shù)量的模塊；
3.支持模塊的異步加載；
4.為加載模塊提供編程支持。
*/
//導(dǎo)入footer組件
import Footers from '../components/footer'
//導(dǎo)入路由
import Router from 'vue-router'
//default導(dǎo)出，使用關(guān)鍵字default，可將對象標(biāo)注為default對象導(dǎo)出。default關(guān)鍵字在每一個模塊中只能使用一次。它既可以用于內(nèi)聯(lián)導(dǎo)出，也可以用于一組對象導(dǎo)出聲明中。
export default{
  components:{
    Footers
  }
}
</script>

Footer是一個公用的頁腳組件，存放于components文件夾中

footer.vue

<template>
  <div class='footer'>
    <a v-link="{path:'/home'}">
      <span v-if="$route.name == 'home'" class='active'>首頁</span>
      <span v-else>首頁</span>
    </a>
    <a v-link="{path:'/list'}">
      <span v-if="$route.name == 'list'" class='active'>跳轉(zhuǎn)1</span>
      <span v-else>跳轉(zhuǎn)1</span>
    </a>
    <a v-link="{path:'/account'}">
      <!-- 根據(jù)路由名稱判斷選中的項 -->
      <span v-if="$route.name == 'account'" class='active'>跳轉(zhuǎn)2</span><!-- 滿足條件 -->
      <span v-else>跳轉(zhuǎn)2</span><!--不滿足-->
    </a>
  </div>
</template>
<style>
  .footer{
    background: #fff;
    border-top: 1px solid #dedede;
    display: table;
  }
  .footer a{
    display: table-cell;
    text-align: center;
    text-decoration: none;
    color: #666
  }
  .active{
    color:red !important;
  }
</style>

由于app.vue是最頂級的入口文件，在app.vue中引用footer組件的話，所有頁面都會包含footer內(nèi)容，但是二級頁面等子頁面不需要，所以得把a(bǔ)pp.vue中代碼復(fù)制到index.vue中，把a(bǔ)pp.vue中footer相關(guān)的部分刪掉。

在index.html中添加如下代碼，創(chuàng)建一個路由實例。

<app></app>

在main.js中配置route.map

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'//導(dǎo)入vue-router
//導(dǎo)入組件
import App from './App'
import Index from './page/index'
import list from './page/list'
import Home from './page/home'
import Account from './page/account'
Vue.use(VueRouter)
var router = new VueRouter()
router.map({
  //默認(rèn)指向index
  '/':{
    name:'index',
    component:Index,
    //子路由(有頁底)
    subRoutes:{
      '/home':{
        name:'home',
        component:Home
      },
      '/account':{
        name:'account',
        component:Account
      }
    }
  },
  //沒有footer
  '/list':{
    name:'list',
    component:list
  }
})
//啟動一個啟用了路由的應(yīng)用
router.start(App,'app')

router.start中的'app'，指的是index中的：<app></app>，可以取其他的名字，但是得和index中的名字一致。

這時啟動項目（npm run dev）會發(fā)現(xiàn)，頁面上只有footer，而沒有顯示其他內(nèi)容。因為index.vue本來就只有footer而沒有其他內(nèi)容，但是我們肯定要顯示頁面，就要用到

router.redirect(redirectMap)重定向

例如：我們要默認(rèn)載入home頁面

在main.js中加入

//重定向到home
router.redirect({
  '*':'home'
})
router.start(App,'app')

在index中加入init()函數(shù)

<script>
export default{
  components:{
    Footers
  },
  init(){
    var router = new Router()
     router.go('/home');//跳轉(zhuǎn)到home組件
    }
}
</script>

然而，經(jīng)過測試，redirect并沒有重定向的home，載入home的真正原因是：router.go('/home')

此時，進(jìn)入項目就會顯示home頁面的內(nèi)容了。

路由規(guī)則和路由匹配

Vue-router 做路徑匹配時支持動態(tài)片段、全匹配片段以及查詢參數(shù)（片段指的是 URL 中的一部分）。對于解析過的路由，這些信息都可以通過路由上下文對象（從現(xiàn)在起，我們會稱其為路由對象）訪問。在使用了 vue-router 的應(yīng)用中，路由對象會被注入每個組件中，賦值為 this.$route ，并且當(dāng)路由切換時，路由對象會被更新。

$route.path

字符串，等于當(dāng)前路由對象的路徑，會被解析為絕對路徑，例如：/list，來源于route.map中配置的路徑

router.map({
  '/home':{
  name:'list',
  component:Home
  } 
})

dom中

<a v-link="{path:'/list'}">前往list列表頁面</a>

或者（具名路徑）

<a v-link="{name:'list'}">前往list列表頁面</a>

帶參數(shù)跳轉(zhuǎn)（例如：從列表頁跳轉(zhuǎn)到列表詳情頁）

<ul>
  <li v-for="item in alllist">
    <!--點擊跳轉(zhuǎn)到詳情-->
    <a v-link="{ name: 'listDetail',params:{id: item.id }}">
      {{item.title}}<!--標(biāo)題 -->
    </a>
  </li>
</ul>

script。

<script>
export default{
  data(){
    return{
      alllist:[]
    }
  },
  route:{
    data({to}){
      return Promise.all([
        //獲取數(shù)據(jù)
        this.$http.get('http://192.168.0.1/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1})
      ]).then(function(data){
        return{
          //將獲取到的數(shù)據(jù)復(fù)制給allllist數(shù)組
          alllist:data[0].data.knowledgeList
        }
      },function(error){
        //error
      })
    }
  }
}
</script>

詳情頁代碼

<div class='article-box' v-if="!$loadingRouteData">
  <p class='font-bigger'>{{listDetail.title}}</p>
  <p class='co9a9a9a article-time'><span>閱讀：{{listDetail.viewTimes}}</span><span>發(fā)布時間: {{listDetail.publishTime | timer}}</span></p>
  <div class='content-img'>
    {{{listDetail.content}}}<!--讀取富文本信息-->
  </div>
</div>
<script>
export default{
  data() {
    return{
      listDetail:[],
      routeid:''
      //若不是走路由，采用另一種方式獲取
      //routeid:this.$route.query.id
    }
  },
  route:{
    //id:來源于a標(biāo)簽的參數(shù)
    data ({to:{params:{ id}}}) {
      var that = this ; 
      that.$set('routeid',id)//獲取id
      return Promise.all([
        that.$http.get('http://192.168.0.1/rest/knowledge',{'id':id}),
        ]).then(function(data){
           console.log(data)
           return{
            listDetail:data[0].data.knowledge,
          } 
      })
    }
  },
  methods:{
    collect(){
      
    }
  },
  ready(){
    var that = this;
    console.log(that.$get('routeid')) //得到傳進(jìn)來的id
  }
}
</script>

此時router要做下修改

'/list':{
  name:'list',
  component:GetReceipt
},
'/listDetail/:id':{
  name:'listDetail',
  component:GetReceiptDetail
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
router

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-router路由簡單案例介紹

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具