路由
路由的最基本配置:
1.下載vue-router模塊(我們搭建vue項目時 已經勾選下載 所以在這不需要重複下載)
2.在main.js 使用import語句 引入vue-router模塊
3.讓vue加載路由功能
Vue.use(VueRouter)
創建vue對象 配置路由
1.創建VueRouter對象 構造函數傳入大括號 配置路由
2.VurRouter 常用的屬性:
1.mode(路由模式): hash和history
hash:哈希模式(路徑後面帶/#/)
history 歷史路徑模式 (需要服務器環境配置
開發時不影響 一旦打包 如果失去了服務器配置環境 那麼頁面空白)
2.base: 基本路徑
例如: 我們的vue路徑是 www.myvue.com
加入 base:"itszt" 後
路徑是:
www.myvue.com/itszt/
3.routes 配置路由路徑的
值是一個數組 數組裏面每一個路由 都是一對大括號
每一個路由對象 的配置:
path:"" //路徑是什麼
component:組件對象 //訪問什麼組件
name:"" //給當前組件起名字 (後面傳參要用到)
4.把new出來的 配置好的 路由對象 綁定給vue對象
在Vue的大括號裏面 定義屬性名 router: new出來的那個VueRouter對象
5.把router-view這個標籤 寫到指定位置 讓路由顯示出來
<keep-alive>
<!--vue2.0提供了一個keep-alive組件,
用來緩存組件,避免多次加載相應的組件,減少性能消耗-->
<router-view/>
</keep-alive>
那麼路由在回退時 不觸發mounted鉤子函數了
因爲這個標籤的作用就是讓組件可以緩存
那麼也就是不觸發mounted 如果我們的數據是在mounted裏面獲取的
那麼一旦回退 數據不重新獲取了
那麼怎麼才能重新獲取呢
跟keep-alive標籤對應的鉤子函數就是activated
import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"
import Student from "./components/Student"
import Teacher from "./components/Teacher"
Vue.use(VueRouter);
var myrouter=new VueRouter({
// mode:"hash" 默認
// base:"itszt"
routes:[
{
path:"/student",
component:Student
},
{
path:"/teacher",
component:Teacher
},
]
});
new Vue({
el: '#app',
//把路由對象註冊進Vue
router:myrouter,
components: { App },
template: '<App/>'
})
* 在main.js裏面直接做路由的配置 雖然效果是沒問題的
* 但是代碼結構太亂
* 我們要把路由的所有配置代碼單獨提出去 寫成一個js文件
*
* 在js文件裏面 把路由配置成功 new出來 router對象
*
* 最後 通過 export default router; 把配置好的對象對外暴露
*
* 在main.js裏面通過 import語句 引入這個對外暴露的router對象
* 最後把router對象在Vue裏面註冊一下
maina.js文件代碼
import Vue from 'vue'
import App from './App'
import router from "./router" //如果引入的是一個文件夾 則默認找index
//router跟el components屬性名 一樣是Vue規定好的
new Vue({
el: '#app',
//鍵和值一樣
router,
components: { App },
template: '<App/>'
})
router/index.js文件代碼
import Vue from 'vue'
import VueRouter from "vue-router"
Vue.use(VueRouter);
import Home from "../components/Home";
import Gwc from "../components/Gwc";
import User from "../components/User";
var router=new VueRouter({
mode:"history",
routes:[
//當前/路徑 表示 頁面加載時 默認訪問首頁 訪問首頁時 默認router-view展示哪個組件
{
path:"/",
component:Home
},
{
path:"/gwc",
component:Gwc
},
{
path:"/user",
component: User
}
]
})
//我們需要把創建出來的 router對象 導出 去 main.js纔可以導入
export default router;
app.vue代碼 用<router-view></router-view>展示組件
<template>
<div id="app">
<h1>我是app首頁的導航</h1>
<ul id="nav">
<li><a href="/">首頁</a></li>
<li><a href="/gwc">購物車</a></li>
<li><a href="/user">個人中心</a></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
控制路由跳轉的方式
控制跳轉路由的方式有很多
比如原生的 a標籤 路徑寫上路由路徑 則可以跳轉
還有 js代碼的 window.location="路由路徑"
但是這些跳轉 都是原生提供的
router路由模塊裏面兩種對應的跳轉方式:
1.靜態標籤跳轉: router-link標籤
router-link標籤 必須有的屬性 to屬性
表示當前的路由跳轉目標 如果沒有就報錯
router-link一旦加上to屬性 那麼默認解析成a標籤
tag="li" 表示把 router-link標籤解析成li標籤
或者其他標籤也可以 可以改成任意標籤
如果想要給route-link標籤綁定事件
vue提供了 給自定義組件標籤綁定事件的方式:
@事件名稱.native="驅動函數"
通過添加.native時間修飾符 能夠給自定義組件綁定事件
<router-link @click.native="show" tag="div" to="/">首頁</router-link>
<router-link @click.native="show" tag="div" to="/gwc">購物車</router-link>
<router-link @click.native="show" tag="div" to="/user">個人中心</router-link>
2.動態js代碼跳轉: this.$router.push("路由路徑")
通過自己寫標籤 給標籤添加點擊事件 js代碼的方法跳轉路由
會記錄歷史記錄的跳轉方式
this.$router.push("路由路徑") 就是js控制路由跳轉
不會有歷史記錄的跳轉方式
this.$router.replace("路由路徑")
如果跳轉到下一個路由用的是 replace方法 那麼當前頁面路由不會記錄到歷史記錄中
<template>
<div id="app">
<h1>我是App.vue主頁</h1>
<!-- 靜態標籤的方式跳轉路由-->
<!-- <router-link @click.native="show" tag="div" to="/">首頁</router-link>
<router-link @click.native="show" tag="div" to="/gwc">購物車</router-link>
<router-link @click.native="show" tag="div" to="/user">個人中心</router-link>-->
<p>
<button @click="go1">首頁</button>
<button @click="go2">購物車</button>
<button @click="go3">個人中心</button>
</p>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
show(){
alert("路由即將要跳轉")
},
go1(){
this.$router.push("/")
},
go2(){
// this.$router.push("/gwc")
this.$router.replace("/gwc")
},
go3(){
this.$router.push("/user")
}
}
}
</script>
<style>
</style>
子路由的配置
子路由就是在當前路由下面 還有路由
例如:
當前路由是: /gwc
子路由可以是 /gwc/list1 /gwc/youhui /gwc/xiaoliang
子路由的配置步驟:
1.找到要配置子路由父路由對象
2.在父路由的對象裏面 添加一個屬性 children:[]
3.在children的中括號裏面添加子路由對象進行配置
4.子路由對象也是path component name三個屬性
5.配置完以後 要把router-view放到父路由的頁面模板自己找個位置
main.js代碼
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home"
import Gwc from "../components/Gwc"
import User from "../components/User"
//引入User路由的三個子路由對象
import Tuijian from "../components/User/Tuijian"
import Logout from "../components/User/Logout"
import Setting from "../components/User/Setting"
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{
path: '/',
component:Home
},
{
path: '/gwc',
component:Gwc
},
{
path: '/user',
component:User,
children:[
{
path:"/user/", //表示 跳轉到/user時 user裏面的router-view默認顯示推薦這個子路由
component:Tuijian
},
{
path:"/user/logout",
component:Logout
},
{
path:"/user/setting",
component:Setting
}
]
},
]
})
子路由的父模塊代碼
<template>
<div>
<h2>個人中心</h2>
<ul>
<li @click="logout">註銷登陸</li>
<li>修改密碼</li>
<li @click="setting">幫助與設置</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods:{
logout(){
this.$router.push("/user/logout")
},
setting(){
this.$router.push("/user/setting")
}
}
}
</script>
<style scoped>
</style>
路由跳轉之間的傳參(包括父子路由)
有兩種:
1.path+query方式傳參
跳轉時傳參數:
this.$router.push({
path:"/路由路徑",
query:{
//要傳過去的鍵值對
鍵1:值1,
鍵2:值2
.
.
.
}
})
跳轉過去後接受參數:
在目標路由的mounted方法裏面 接受傳過來的路由參數
this.$route.query 接受到傳過來的鍵值對那個對象
通過 this.$route.query.鍵1 獲取值
通過 this.$route.query.鍵2 獲取值
.
.
.
path+query方式路由傳參時 會在地址欄體現出參數的拼接
go2(){
// this.$router.push("/gwc")
//path+query的方式傳參
this.$router.push({
path:"/gwc",
query:{
mobile:"13812345678",
userid:"10026"
}
})
}
export default {
name: "Gwc",
mounted(){
/*console.log("傳過來的參數是:",this.$route.query);
console.log("傳過來手機號是:",this.$route.query.mobile);
console.log("傳過來用戶號是:",this.$route.query.userid);*/
}
}
2.name+params方式傳參
這種方式前提必須保證 路由配置時 已經添加了name屬性
路由跳轉時傳參數
this.$router.push({
name:"路由配置時的name值",
params:{
//要傳過去的鍵值對
鍵1:值1,
鍵2:值2
.
.
.
}
})
目標路由展現時 接收路由提交過來的參數:
this.$route.params 接受到傳過來的鍵值對那個對象
通過 this.$route.params.鍵1 獲取值
通過 this.$route.params.鍵2 獲取值
.
.
.
* 這種方式傳的參數 不在地址欄體現出來 所以一旦頁面刷新
數據就會丟失 只有第一次跳轉過來傳的那一次能夠接收到
go3(){
// this.$router.push("/user")
// 給user傳路由參數
this.$router.push({
name:"User",
params:{
mobile:"13912345678",
userid:10086
}
})
}
mounted(){
console.log("傳過來的參數是:",this.$route.params);
console.log("傳過來手機號是:",this.$route.params.mobile);
console.log("傳過來用戶號是:",this.$route.params.userid);
if(this.$route.params.mobile){//如果有再賦值
// 給當前組件的data裏面的一個變量賦值
this.mobile=this.$route.params.mobile;
}
}
動態路由
{
// path: '/gwc', //這個是固定路由 也就是 跳轉時 只能匹配/gwc
//如果我的需求是 /gwc/10006 是小強的購物車
// /gwc/10007 是小白的購物車 等等等
// 那麼此時我們需要配置動態路由
path:"/gwc/:id", //這個:id是自己隨便起的名字 表示聲明一個id變量 以後所有的/gwc/隨便 的路由都能跳轉到購物車頁面
name:"Gwc",
component:Gwc
}
本地mock數據搭建
1.打開cmd全局安裝json-server
輸入命令 cnpm/npm install json-server -g
2.找到自己要mock的json文件 複製到一個單獨文件夾
用cmd切換到json文件所在的目錄
3.輸入命令 json-server 文件名.json --port 自己想一個端口 -h自己電腦ip
-h可以不寫 默認以localhost啓動
active-class
-
類型:
string -
默認值:
"router-link-active"設置鏈接激活時使用的 CSS 類名。默認值可以通過路由的構造選項
linkActiveClass來全局配置。<ul> <router-link replace :to='{name:v.path}' tag="li" v-for="(v,i) in products" :key="i" active-class="haha" @click.native="show(i)" >{{v.name}}</router-link> </ul>.left_inner li.haha, .left_inner li:hover { background: #4fc08d; color: #fff; }路由重定向
-
//訪問/detail時 自動重定向去訪問analysis子路由
redirect:"analysis",