vue學習06——router動態路由01
vue路由vue-router
在Web開發中，路由是指根據URL分配到對應的處理程式。對於大多數單頁面應用，都推薦使用官方支援的vue-router。
Vue-router通過管理URL，實現URL和元件的對應，以及通過URL進行元件之間的切換。本文將詳細介紹Vue路由vue-router
安裝
在使用vue-router之前，首先需要安裝該外掛
npm install vue-router
如果在一個模組化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
如果使用全域性的 script 標籤，則無須如此
使用
用Vue.js + vue-router建立單頁應用非常簡單。使用Vue.js ，已經可以通過組合元件來組成應用程式，把vue-router新增進來，需要做的是，將元件(components)對映到路由(routes)，然後告訴 vue-router 在哪裡渲染它們
下面是一個例項
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 元件來導航，通過傳入 `to` 屬性指定連結，<router-link> 預設會被渲染成一個 `<a>` 標籤 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口，路由匹配到的元件將渲染在這裡 -->
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 0. 如果使用模組化機制程式設計，匯入Vue和VueRouter，要呼叫 Vue.use(VueRouter)
// 1. 定義（路由）元件，可以從其他檔案 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是通過 Vue.extend() 建立的元件構造器，或者，只是一個元件配置物件。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 建立 router 例項，然後傳 `routes` 配置，當然還可以傳別的配置引數
const router = new VueRouter({
routes // （縮寫）相當於 routes: routes
})
// 4. 建立和掛載根例項。
// 通過 router 配置引數注入路由，從而讓整個應用都有路由功能
const app = new Vue({
el:'#app',
router
})</script> Hello App!
路由模式
vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入
http://localhost:8080/#/Hello
如果不想要很醜的 hash，可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面
const router = new VueRouter({
mode: 'history',
routes: [...]
})
當使用 history 模式時，URL 就像正常的 url
http://localhost:8080/Hello
不過這種模式需要後臺配置支援。如果後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404
【伺服器配置】
如果要使用history模式，則需要進行伺服器配置
所以，要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是app 依賴的頁面
下面是一些配置的例子
apache
以wamp為例，需要對httpd.conf配置檔案進行修改
首先，去掉rewrite_module前面的#號註釋
LoadModule rewrite_module modules/mod_rewrite.so
然後，將文件所有的AllowOverride設定為all
AllowOverride all
最後，需要儲存一個.htaccess檔案放置在根路徑下面，檔案內容如下
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
【注意事項】
這麼做以後，伺服器就不再返回404錯誤頁面，因為對於所有路徑都會返回 index.html 檔案。為了避免這種情況，應該在Vue應用裡面覆蓋所有的路由情況，然後再給出一個404頁面
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
或者，如果是用 Node.js 作後臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 fallback
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const NotFound = {template:'<div>not found</div>'}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', component: NotFound},
]
not found
重定向和別名
【重定向】
重定向通過 routes 配置來完成，下面例子是從 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目標也可以是一個命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一個方法，動態返回重定向目標：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標路由 作為引數
// return 重定向的 字串路徑/路徑物件
return '/home'
}}
]
})
對於不識別的URL地址來說，常常使用重定向功能，將頁面定向到首頁顯示
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: "/foo"},
]
foo
【別名】
重定向是指，當用戶訪問 /a時，URL 將會被替換成 /b，然後匹配路由為 /b，那麼別名是什麼呢？/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像使用者訪問 /a 一樣
上面對應的路由配置為
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
『別名』的功能可以自由地將 UI 結構對映到任意的 URL，而不是受限於配置的巢狀路由結構
處理首頁訪問時，常常將index設定為別名，比如將'/home'的別名設定為'/index'。但是，要注意的是，<router-link to="/home">的樣式在URL為/index時並不會顯示。因為，router-link只識別出了home，而無法識別index
根路徑
設定根路徑，需要將path設定為'/'
<p>
<router-link to="/">index</router-link>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
const routes = [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
]
但是，由於預設使用的是全包含匹配，即'/foo'、'/bar'也可以匹配到'/'，如果需要精確匹配，僅僅匹配'/'，則需要在router-link中設定exact屬性
<p>
<router-link to="/" exact>index</router-link>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
const routes = [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
]
搜尋
複製