vue-route使用

vue-router中的路由也是基于上面的內容來實現的

在vue中實現路由仍是相對簡單的。因為頁面中所有內容都是組件化的，只要把路徑和組件對應起來就可以了，然后在頁面中把組件襯著出來。

1，頁面實現（html模版中）

在vue-router中, 也可以看到它界說了兩個標簽<router-link> 和<router-view>。 <router-link> 就是界說頁面中點擊的部門，<router-view> 就是點擊后，顯示內容的部門。所以 <router-link> 還有一個很是主要的屬性 to，它界說點擊之后，要到哪個路徑下，如：<router-link to="/home">Home</router-link>

2， js 中設置裝備擺設路由

起首要界說route, 一條路由的實現。它是一個對象，最根基的一條路由由兩個部門構成： path: component. path 指路徑，component 指的是組件。如：{path:'/home', component: home}

東西/原料

JavaScript

方式/步調

1
這里有兩條路由，構成一個routes:
2
最后建立router 對路由進行辦理，它是由機關函數 new vueRouter() 建立，接管routes 參數。
3
設置裝備擺設完當作后，把router 實例注入到 vue 根實例中,就可以利用路由。
4
執行過程：當用戶點擊 router-link 標簽時，會去尋找它的 to 屬性，它的 to 屬性和 js 中設置裝備擺設的路徑{ path: '/home', component: Home} path 一一對應，從而找到了匹配的組件，最后把組件襯著到 <router-view> 標簽。所有的這些實現才是基于hash 實現的。
vue-cli 建立一個項目體驗一下, 當然不要健忘安裝vue-router
1, 在src 目次下新建兩個組件，home.vue 和 about.vue
5
2, 在 App.vue中界說<router-link > 和 </router-view>
6
3, 在 src目次下再新建一個router.js 界說router, 就是界說路徑到組件的映射。
7
4，把路由注入到根實例中，啟動路由。這里其實還有一種方式，就像store 注入到根實例中，可以在main.js中引入路由，注入到根實例中。
8
5，這時點擊頁面上的home 和about 可以看到組件往返切換。當初次進入頁面的時辰，頁面中并沒有顯示任何組件。想讓頁面一加載進來就顯示home頁面，這需要重定標的目的，所謂重定標的目的，其實就是從頭給它指心猿意馬一個偏向，好比當用戶點擊home 的時辰，我們讓它指標的目的about.
這用到了redirect 設置裝備擺設。剛進入頁面的時辰，它的路徑是 '/', 所以從頭界說到home
9
6，打開瀏覽器的節制臺，可以看到路由時組件的切換。
起首看到 router-link 標簽襯著當作了 a 標簽，to 屬性釀成了a 標簽的 href 屬性，這時就大白了點擊跳轉的意思。router-view 標簽襯著當作了界說的組件。可以對比一下app.vue 中的標簽和節制臺中的標簽
10
動態路由
分歧的用戶（就是用戶的id分歧），它城市導航到統一個user 組件中。在設置裝備擺設路由的時辰，就不克不及寫死, 就是路由中的path屬性，不克不及寫死。如 path： “/home”,只有是home的時辰，才能顯示home 組件，執行的是嚴酷匹配。導航到 user 組件，路徑中必定有user,
id 分歧，那就給路徑一個動態部門來匹配分歧的id. 動態部門以 : 開首，那么路徑就釀成了 /user/:id, 這條路由就可以這么寫： { path:"/user/:id", component: user }.
再界說一個user組件，頁面中添加兩個router-link 用于導航， router.js中添加路由設置裝備擺設。user組件隨便寫一個就好了。
app.vue 更改如下：
11
在動態路由中，想知道路由是從哪里過來的，就是獲取到動態部門怎么辦。當整個vue-router 注入到根實例后，在組件的內部，可以經由過程this.$route.params 來獲得這個動態部門的。它是一個對象，屬性名，就是路徑中界說的動態部門 id, 屬性值就是router-link中to 屬性中的動態部門，如123。在組件中，若是想要獲取到state 中的狀況，我們可以用computed 屬性，在這里也是一樣，在組件中，界說一個computed 屬性dynamicSegment， user 組件點竄如下：

發表于 2018-03-10 00:00
閱讀 ( 879 )
分類：其他類型

vue-route使用

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章