官方網(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
