Vue-router學(xué)習(xí)指南
日記：本文按照vue-router官網(wǎng)的知識(shí)結(jié)合例子進(jìn)行分析和講解，搭建工具（vue-cli,vue-router）
基本搭建
-
安裝vue-cli
npm install -g vue-cli -
通過webpack搭建
// 初始化項(xiàng)目 vue init webpack Your-projectName // 安裝依賴 npm i // 啟動(dòng)項(xiàng)目 npm run dev 項(xiàng)目結(jié)構(gòu)
搭建解析
-
route下面的index（一個(gè)主觀的認(rèn)識(shí)，之后會(huì)有詳細(xì)的解釋和干貨）
// 引入依賴 import Vue from 'vue' import Router from 'vue-router' // 引入組件 import DemoAbout from '@/components/DemoAbout' import DemoContact from '@/components/DemoContact' import DemoHome from '@/components/DemoHome' import DemoContactChild1 from '@/components/DemoContactChild1' //vue使用vue-router Vue.use(Router) // 導(dǎo)出內(nèi)容給main.js使用 export default new Router ({ // routes數(shù)組,里面是每一個(gè)路由配置 routes: [ { path: '/', name: 'Home', component: DemoHome }, { path: '/contact/:id?', name: 'Contact', component: DemoContact, children: [ { path: 'hello', component: DemoContactChild1 } ] }, { path: '/about', name: 'About', component: DemoAbout }, ] })-
解析
path: 對(duì)應(yīng)的路徑。name: 路由的命名。component: 對(duì)應(yīng)的組件-
上面的@是怎么來(lái)的呢？通過
webpack的別名alias來(lái)定義目錄// 找到build下面的webpack.base.conf.js配置 21行 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, // 找到resolve 6行 function resolve (dir) { return path.join(__dirname, '..', dir) } // 所以得到@是運(yùn)行文件下的src的簡(jiǎn)寫
-
路由解析
-
簡(jiǎn)單的路由配置
//組件 const Foo = {template: '<div>Foo</div>'}; const Bar = {template: '<div>Bar</div>'}; // 先來(lái)一個(gè)簡(jiǎn)單的路由配置 const routes = [ {path: '/foo', component: Foo}, { path: '/bar', component: Bar } ] // 我們需要實(shí)例化routes const route = new Router({ routers }) // 然后我們需要掛載實(shí)例并通過route組件路由，然后就可以全局使用了 const app = new Vue({ el: '#app', route })通過上面的例子，我們已經(jīng)對(duì)路由有了一個(gè)大致的認(rèn)識(shí)，接下來(lái)介紹動(dòng)態(tài)路由配置和嵌套路由
?
?
-
動(dòng)態(tài)路由配置和嵌套路由
動(dòng)態(tài)設(shè)置路由： 以冒號(hào)開頭。
{ path: '/user/:id', component: User }通過{{$route.params.id}}或者this.$route.params.id獲取值。// 如果學(xué)習(xí)了express.js的部分就知道，對(duì)應(yīng)路由的配置是可以通過正則和動(dòng)態(tài)路由參數(shù)來(lái)傳遞 { path: '/contact/:id?', //正則匹配，可以傳遞id也可以不傳id name: 'Contact', component: DemoContact, } <div>{{$route.params.id}}</div>高級(jí)路由配置
模式 匹配路徑 $route.params /user/:username /user/evan { username: 'evan' } /user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: 123 } /user/:username/post/:id? /user/evan/post { username: 'evan' } 路由嵌套：頁(yè)面通過
<router-view></router-view>實(shí)現(xiàn)頁(yè)面的顯示路由，我們?cè)诼酚芍型ㄟ^children來(lái)配置子路由單元。通過頁(yè)面的router-view來(lái)展示相應(yīng)的子路由<! --我們?cè)贒emoContact中配置router-view --> <template> <div id="contact"> <h2>this is contact</h2> <!--設(shè)置子路由配置--> <router-view></router-view> </div> </template>// 通過children子元素來(lái)配置相應(yīng)的子路由單元 routes: [ { path: '/contact/:id', name: 'Contact', component: DemoContact, children: [ { path: 'hello', component: DemoContactChild1 } ] }, ]注意： 由于帶有
/就是目錄的根目錄，所以我們?cè)谂渲米勇酚傻臅r(shí)候不要寫成/hello，否則就不會(huì)配置相應(yīng)的路徑。
?
-
編程式路由
需求：如果我們需要在組建的js部分跳轉(zhuǎn)頁(yè)面怎么弄？
在html模板中，我們可以通過
router-link來(lái)顯示頁(yè)面路由的跳轉(zhuǎn)，在js模板中，我們則需要通過router.push()來(lái)實(shí)現(xiàn)-
router.push(location) 如果不是絕對(duì)目錄就會(huì)替換當(dāng)前路由的最后一個(gè)路徑配置
// 字符串跳轉(zhuǎn)path // 當(dāng)前頁(yè)面是http://localhost:8080/#/contact router.push('home') //http://localhost:8080/#/about // 當(dāng)前頁(yè)面是http://localhost:8080/#/contact/600 router.push('home') // http://localhost:8080/#/about router.push('/home') //http://localhost:8080/#/about // 對(duì)象 router.push({ path: 'home' }) //路由的命名 router.push({ name: 'user', params: { id: 123 }}) // 帶查詢參數(shù)，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) //js模板中使用 this.$route.push() this.$router.push({name: 'Contact',params: {id: 6000}}) //注意帶參數(shù)。一定是name特別注意：當(dāng)我們需要傳遞
params的時(shí)候，一定是通過name來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，不能通過path。聲明式 編程式 <router-link :to="..."> router.push(...)
?
-
-
命令路由
有時(shí)候，我們需要通過一個(gè)簡(jiǎn)單的名字來(lái)實(shí)現(xiàn)跳轉(zhuǎn)，這樣我們可以在實(shí)例化路由的時(shí)候，通過
name，來(lái)實(shí)現(xiàn)跳轉(zhuǎn)和傳參。// 通過name來(lái)實(shí)例化路由配置 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })跳轉(zhuǎn)通過
name來(lái)定義的路由配置<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>代碼js調(diào)用路由配置
this.$router.push({name: 'user',params: {userId: 123}})上述2中方式都會(huì)把路由導(dǎo)航到
name: user相對(duì)應(yīng)的路由配置/user/123
- 命名視圖
如果你想一個(gè)頁(yè)面同時(shí)展示多個(gè)視圖，而不是嵌套展示。例如：一個(gè)布局，有左邊欄（sidebar）和 main(主內(nèi)容)2個(gè)視圖。這個(gè)時(shí)候命名視圖就起到作用了，你可以在頁(yè)面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的視圖出口。如果
router-view沒有設(shè)置名稱，則默認(rèn)的是default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view one" name="b"></router-view>
一個(gè)視圖使用一個(gè)組件渲染，如果對(duì)于同一個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components 配置（帶上 s）：
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
所以當(dāng)我們?yōu)g覽器訪問根目錄的時(shí)候，會(huì)渲染三個(gè)視圖，分別對(duì)應(yīng)三個(gè)組件。
- 重定向和別名
重定向：指的是當(dāng)我們?cè)L問一個(gè)路由的時(shí)候，需要把這個(gè)路由重新定位到一個(gè)新的路由，不使用原來(lái)的組件
別名： 當(dāng)我們?cè)L問一個(gè)路由的時(shí)候，給它起一個(gè)小名，當(dāng)我們?cè)L問這個(gè)小名的時(shí)候，還是會(huì)跳到那個(gè)路由。
重定向
重定向也是通過 routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{
path: '/a',
redirect: '/b',
component: '...'
}
]
})
重定向的目標(biāo)也可以是一個(gè)命名空間的路由
const router = new VueRouter({
routes: [
{
path: '/a',
redirect: {name: 'foo'}
}
]
})
甚至是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)
別名
『重定向』的意思是，當(dāng)用戶訪問 /a時(shí)，URL 將會(huì)被替換成 /b，然后匹配路由為 /b，那么『別名』又是什么呢？
/a 的別名是 /b，意味著，當(dāng)用戶訪問 /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣。
上面對(duì)應(yīng)的路由配置為：
const route = new VueRouter({
routes: [
{
path: '/a',
component: A,
alias: '/b'
}
]
})
