vue-router路由簡單案例介紹
官方文檔：
舊版：https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
新版：http://router.vuejs.org/（2.0版本）
此文是舊版
文件結構圖：
基本用法：
<router-view>是一個頂級的路由外鏈，用于渲染匹配的組件。
例如：我的應用入口是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關鍵詞導出對象。這個關鍵字可以無限次使用；
2.使用import關鍵字將其它模塊導入某一模塊中。它可用來導入任意數(shù)量的模塊；
3.支持模塊的異步加載；
4.為加載模塊提供編程支持。
*/
//導入footer組件
import Footers from '../components/footer'
//導入路由
import Router from 'vue-router'
//default導出，使用關鍵字default，可將對象標注為default對象導出。default關鍵字在每一個模塊中只能使用一次。它既可以用于內(nèi)聯(lián)導出，也可以用于一組對象導出聲明中。
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)容，但是二級頁面等子頁面不需要，所以得把app.vue中代碼復制到index.vue中，把app.vue中footer相關的部分刪掉。
在index.html中添加如下代碼，創(chuàng)建一個路由實例。
<app></app>
在main.js中配置route.map
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'//導入vue-router
//導入組件
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({
//默認指向index
'/':{
name:'index',
component:Index,
//子路由(有頁底)
subRoutes:{
'/home':{
name:'home',
component:Home
},
'/account':{
name:'account',
component:Account
}
}
},
//沒有footer
'/list':{
name:'list',
component:list
}
})
//啟動一個啟用了路由的應用
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)重定向
例如：我們要默認載入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')
此時，進入項目就會顯示home頁面的內(nèi)容了。
路由規(guī)則和路由匹配
Vue-router 做路徑匹配時支持動態(tài)片段、全匹配片段以及查詢參數(shù)（片段指的是 URL 中的一部分）。對于解析過的路由，這些信息都可以通過路由上下文對象（從現(xiàn)在起，我們會稱其為路由對象）訪問。 在使用了 vue-router 的應用中，路由對象會被注入每個組件中，賦值為 this.$route ，并且當路由切換時，路由對象會被更新。
$route.path
字符串，等于當前路由對象的路徑，會被解析為絕對路徑，例如：/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}}<!--標題 -->
</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ù)復制給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標簽的參數(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')) //得到傳進來的id
}
}
</script>
此時router要做下修改
'/list':{
name:'list',
component:GetReceipt
},
'/listDetail/:id':{
name:'listDetail',
component:GetReceiptDetail
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue 如何從單頁應用改造成多頁應用，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了深入解析Vue的自定義指令,自定義指令主要是為了重用涉及普通元素的底層 DOM 訪問的邏輯,一個自定義指令由一個包含類似組件生命周期鉤子的對象來定義,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了基于vue展開收起動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇vue自定義全局共用函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)界面滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
前端的數(shù)據(jù)均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
面包屑導航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回，本文為大家介紹了實現(xiàn)面包屑導航的正確方式，需要的可以參考一下2023-06-06
three.js實現(xiàn)vr全景圖功能實例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關的項目,下面這篇文章主要給大家介紹了關于three.js實現(xiàn)vr全景圖功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要給大家介紹了關于vue項目結構目錄超詳細介紹的相關資料,Vue項目目錄結構是指在開發(fā)Vue項目時,為了更好地組織和管理代碼,將不同的文件按照一定的規(guī)則和層次結構進行分類和存放的方式,需要的朋友可以參考下2023-12-12
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下2024-01-01