官方網(wǎng)址
vue-router 路由
路由是哑梳,實現(xiàn)在一個頁面中,跳轉(zhuǎn)到不同的頁面绘盟,會有歷史記錄鸠真。
NPM安裝
npm install vue-router
在模塊化中使用路由,需要
//導(dǎo)入Vue實例
import Vue from 'vue'
//導(dǎo)入路由
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)
使用路由步驟
路由需要在main.js
文件中創(chuàng)建龄毡,我們通常會重新創(chuàng)建一個文件來專門寫路由的實例和配置吠卷。
創(chuàng)建一個路由實例
我們需要把路由實例導(dǎo)出去,在main.js
需要引入沦零,·import router from './router/index'
,路由需要在main.js
中的vue實例中配置一下路由器對象,保證應(yīng)用的每個頁面都可以使用祭隔。--詳細請見官方網(wǎng)址
//這個是配置路由的文件
export default new VueRouter({
//定義路由器對象
routes: [
{
//每一天路由信息,就是一個對象
//*路徑
path: '/home',
// 名稱
name: '首頁',
//* 組件
component: Home,
},
{
path: '/List',
name: '列表',
component: List
},
{
path: '/about',
name: '關(guān)于',
component: About
},
{
path: '/news',
name: '新聞',
component: News
},
]
})
在路由實例中路操,定義路由器對象疾渴,routes
中是一個對象數(shù)組,每個對象中屯仗,都是一個路由信息搞坝,在對象中,有path
name
component
中魁袜,分別代表的是路徑桩撮、名稱敦第、組件,在這三個中店量,path
和 component
定義的芜果, component
是沒有 s 的,區(qū)別是垫桂,一個是全局組件注冊(s)师幕,和局部組件注冊.
怎么使用路由
路由視圖組件
路由視圖,用于顯示路由組件诬滩,當(dāng)瀏覽器的地址欄中切換到指定的路由路徑時霹粥,就會在 router-view
中顯示對應(yīng)的路由組件。
<router-view></router-view>
路由鏈接組件
路由鏈接疼鸟,用于跳轉(zhuǎn)路由后控,to屬性設(shè)置路由路徑
<router-link to="/home">首頁</router-link>
<router-link>
跳轉(zhuǎn)其實就是相當(dāng)于瞄鏈接
編程式路由跳轉(zhuǎn)
this.$route
當(dāng)前路由的配置信息
this.$router
當(dāng)前路由器對象
我們可以影push()進行路由的跳轉(zhuǎn)
this.$router.push('/order')
push
方法跳轉(zhuǎn)需要進行判斷,如果連續(xù)跳轉(zhuǎn)同一個路由空镜,就會報錯浩淘,如果跳轉(zhuǎn)的路徑跟當(dāng)前的路徑相同就不進行跳轉(zhuǎn)
if (this.$route.path !== "/about") {
this.$router.push("/about");
}
replace
方法的跳轉(zhuǎn),是替換當(dāng)前的路由路徑吴攒,缺點是沒有歷史記錄张抄,在刷新頁面的時候,會出現(xiàn)頁面丟失當(dāng)?shù)那闆r
this.$router.replace('/about')
路由傳參
路由組件傳參 | Vue Router (vuejs.org)
1.params 參數(shù)
路由配置
{
// 注意:這里的路由需要傳一個參數(shù)洼怔,路由可以傳多個參數(shù)
path:'/city/:id',
path:'/city/:id/:name', //多個參數(shù)
// 設(shè)置該選項為true署惯,組件可以通過props選項接收路由參數(shù)
props:true,
component:City
},
// *號,表示匹配不上的所有路由
{
path:'*',
component:Error404
}
在router-link
在要后面?zhèn)魅胂鄳?yīng)的值
<router-link to="/type/1001/nj">南京</router-link>
需要在 props: ["id",'name'],
中配置相應(yīng)的名稱
$route
返回的是當(dāng)前路由信息镣隶,它身上有一個params屬性极谊,該屬性里面保存的是當(dāng)前路由信息的參數(shù)。
v-html指令
2. query參數(shù)
路由地址安岂,采用query傳參方式:?參數(shù)1=XXX&參數(shù)2=XXX...
多個參數(shù)使用&
符號連接
<router-link to="/news/?id=1001">弘揚真正民主精神轻猖,共創(chuàng)人類美好未來</router-link>
通過$route.query
獲取路由地址?后面的參數(shù)
this.$route.query
當(dāng)前路由下的參數(shù)
4. vue.config.js
// 引入nodejs內(nèi)置模塊path
let path = require('path')
// 注意:該配置文件中,只能使用commonjs模塊化語法
module.exports = {
// 關(guān)閉 eslint-loader 語法檢查
lintOnSave:false,
// 配置devServer開發(fā)服務(wù)器
devServer:{
// 端口號
port: 5566,
// 自動打開
open:true,
// 靜態(tài)資源路徑
// 注意:__dirname是nodejs的內(nèi)置變量域那,返回的是的當(dāng)前項目的絕對路徑
contentBase: path.join(__dirname, "static")
},
// 用于配置原生的Webpack配置
configureWebpack:{
// 解析
resolve:{
// 定義路徑別名
alias:{
"@c":path.resolve(__dirname,'src/components'),
"@p":path.resolve(__dirname,'src/pages'),
"@a":path.resolve(__dirname,'src/apis'),
"@u":path.resolve(__dirname,'src/utils'),
}
}
}
}
vue.config.js
文件相當(dāng)于webpack
打包工具,在這里配置webpack