路由是什么
路由装诡，其實(shí)就是指向银受，當(dāng)我點(diǎn)擊home導(dǎo)航按鈕，頁(yè)面顯示home的內(nèi)容鸦采，如果點(diǎn)擊的是about宾巍，就切換成about的內(nèi)容。
安裝
1、直接引入包
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2、npm下載
如果在一個(gè)模塊化工程中使用它徐伐，必須要通過(guò) Vue.use()明確的安裝路由功能：在你的項(xiàng)目的src文件夾下的main.js文件內(nèi)寫(xiě)入：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
具體用法
1得湘、基本路由
<div id="app">
<div>
<router-link to="/home">主頁(yè)</router-link> // 默認(rèn)會(huì)被渲染成一個(gè)a標(biāo)簽选浑，to屬性為我們定義的路由
<router-link to="/user" tag='li'>用戶(hù)頁(yè)</router-link> // 如果不想渲染成a蓝厌，可以在tag選項(xiàng)寫(xiě)其他標(biāo)簽
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = { // 定義組件
template: '<p>我是主頁(yè)的內(nèi)容~</p>'
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({ // 定義路由并配置路由
routes: [
{
path: '*', // 沒(méi)有點(diǎn)擊按鈕或者填寫(xiě)路徑錯(cuò)誤默認(rèn)跳轉(zhuǎn)到 /home
redirect: '/home' // 這里就是路由的重定向
},
{
path: '/home', // 路徑
component: Home // 組件
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router // 注入路由
})
</script>
效果：
點(diǎn)擊主頁(yè)按鈕會(huì)顯示主頁(yè)的內(nèi)容，點(diǎn)擊用戶(hù)按鈕會(huì)顯示用戶(hù)的內(nèi)容古徒。
2拓提、動(dòng)態(tài)路由
上面我們定義的路由，都是嚴(yán)格匹配的隧膘，只有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣代态，才能顯示相應(yīng)的組件. 但有時(shí)現(xiàn)實(shí)卻不是這樣的，當(dāng)我們?nèi)ピL(fǎng)問(wèn)網(wǎng)站并登錄成功后疹吃，它會(huì)顯示 歡迎你蹦疑，+ 你的名字。不同的用戶(hù)登錄萨驶， 只是顯示“你的名字” 部分不同必尼，其它部分是一樣的。這就表示篡撵，它是一個(gè)組件，假設(shè)是user組件豆挽。不同的用戶(hù)（就是用戶(hù)的id不同）育谬，它都會(huì)導(dǎo)航到同一個(gè)user 組件中。這樣我們?cè)谂渲寐酚傻臅r(shí)候帮哈，就不能寫(xiě)死, 就是路由中的path屬性膛檀，不能寫(xiě)死，那要怎么設(shè)置? 導(dǎo)航到 user 組件娘侍，路徑中肯定有user, id 不同咖刃，那就給路徑一個(gè)動(dòng)態(tài)部分來(lái)匹配不同的id. 在vue-router中，動(dòng)態(tài)部分 以 : 開(kāi)頭憾筏，那么路徑就變成了 /user/:id, 這條路由就可以這么寫(xiě)： { path:"/user/:id", component: user }
<div id="app">
<div>
<router-link to="/home">主頁(yè)</router-link>
<router-link to="/user/123">用戶(hù)123</router-link>
<router-link to="/user/456">用戶(hù)456</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~</p>'
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user/:id',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
這時(shí)在頁(yè)面中點(diǎn)擊user123 和user456, 可以看到它們都導(dǎo)航到user組件嚎杨，配置正確。
3氧腰、嵌套路由
嵌套路由枫浙，主要是由我們的頁(yè)面結(jié)構(gòu)所決定的。當(dāng)我們進(jìn)入到user頁(yè)面的時(shí)候古拴，它下面還有分類(lèi)箩帚，登陸頁(yè)面，注冊(cè)頁(yè)面黄痪，這時(shí)紧帕，用法如下：
<div id="app">
<div>
<router-link to="/home">主頁(yè)</router-link>
<router-link to="/user">用戶(hù)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/x-template" id="user">
<div>
<div>
<router-link to="/user/login">登陸</router-link>
<router-link to="/user/reg">注冊(cè)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</script>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~</p>'
}
var User = {
template: '#user'
}
var Login = {
template: '<p>我是登陸頁(yè)的內(nèi)容~</p>'
}
var Reg = {
template: '<p>我是注冊(cè)頁(yè)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User,
children: [ // 書(shū)寫(xiě)子路由
{
path: 'login',
component: Login
},
{
path: 'reg',
component: Reg
}
]
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
效果：
4、命名路由
有時(shí)我們通過(guò)一個(gè)名稱(chēng)來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些桅打，特別是在鏈接一個(gè)路由是嗜，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候愈案。你可以在創(chuàng)建 Router 實(shí)例的時(shí)候，在 routes 配置中給某個(gè)路由設(shè)置名稱(chēng)叠纷。
<div id="app">
<div>
<router-link :to="{name: 'home'}">主頁(yè)</router-link>
<router-link :to="{name: 'user'}">用戶(hù)頁(yè)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~</p>'
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '*',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/user',
name: 'user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
5刻帚、路由傳參
5.1、query
<div id="app">
<div>
<router-link to="/home?name=tom&age=24">主頁(yè)</router-link> // 參數(shù)在這里書(shū)寫(xiě)
<router-link to="/user">用戶(hù)頁(yè)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~---{{$route.query}}</p>' // 通過(guò) $route.query 獲取
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
5.2涩嚣、 params
<div id="app">
<div>
<router-link to="/home/jack/25/sing">主頁(yè)</router-link> // 這里直接寫(xiě)值崇众，不用寫(xiě)參數(shù)名
<router-link to="/user">用戶(hù)頁(yè)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~---{{$route.params}}</p>' // 通過(guò) $route.params 獲取
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home/:name/:age/:likes', // 這里定義參數(shù)名
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router
})
</script>
效果：
ps.以上倆種差異：如果要隱藏參數(shù)用params，如果強(qiáng)制刷新不被清除用query
6航厚、編程式導(dǎo)航
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接顷歌，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)幔睬。
6.1眯漩、router-push()
router.push(location)
<div id="app">
<div>
<button @click="push">push</button> // 定義方法
<router-link to="/home">主頁(yè)</router-link>
<router-link to="/user">用戶(hù)頁(yè)</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
<script>
var Home = {
template: '<p>我是主頁(yè)的內(nèi)容~</p>'
}
var User = {
template: '<p>我是用戶(hù)的內(nèi)容~</p>'
}
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
})
var vm = new Vue({
el: '#app',
router,
methods: {
push: function () {
router.push( 'home' );
}
}
})
</script>
// 1、字符串
router.push( 'home' ); // 這里的字符串是路徑麻顶，而不是name赦抖，不用加/
// 2、對(duì)象
router.push( {path: '/home'} );
// 3辅肾、命名的路由
router.push({name: 'home',params: {color: 'green'}}); // 這里用name队萤，不能用path
// 4矫钓、帶查詢(xún)參數(shù)
router.push({path: '/home',query: {age: 25}});
6.2要尔、router.go(n)
這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步新娜，類(lèi)似 window.history.go(n)赵辕。
router.go(1);
6.3、router.replace()
跟 router.push 很像概龄，唯一的不同就是还惠，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄旁钧。
router.replace('home');
