|
本章節(jié)我們將為大家介紹 Vue 路由。 Vue 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。 通過 Vue 可以實現(xiàn)多視圖的單頁 Web 應用（single page web application，SPA）。 Vue.js 路由需要載入 vue-router 庫 中文文檔地址：vue-router 文檔。 安裝1、直接下載 / CDNhttps:///vue-router@4 NPM推薦使用淘寶鏡像： npm install -g cnpm --registry=https://registry. cnpm install vue-router@4 簡單實例Vue.js + vue-router 可以很簡單的實現(xiàn)單頁應用。 <router-link> 是一個組件，該組件用于設置一個導航鏈接，切換不同 HTML 內(nèi)容。 to 屬性為目標地址， 即要顯示的內(nèi)容。 以下實例中我們將 vue-router 加進來，然后配置組件和路由映射，再告訴 vue-router 在哪里渲染它們。代碼如下所示： HTML 代碼<script src="https:///vue@3"></script>
<script src="https:///vue-router@4"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!--使用 router-link 組件進行導航 -->
<!--通過傳遞 `to` 來指定鏈接 -->
<!--`<router-link>` 將呈現(xiàn)一個帶有正確 `href` 屬性的 `<a>` 標簽-->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>
router-link請注意，我們沒有使用常規(guī)的 a 標簽，而是使用一個自定義組件 router-link 來創(chuàng)建鏈接。這使得 Vue Router 可以在不重新加載頁面的情況下更改 URL，處理 URL 的生成以及編碼。我們將在后面看到如何從這些功能中獲益。 router-viewrouter-view 將顯示與 url 對應的組件。你可以把它放在任何地方，以適應你的布局。 JavaScript 代碼// 1. 定義路由組件.
// 也可以從其他文件導入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定義一些路由
// 每個路由都需要映射到一個組件。
// 我們后面再討論嵌套路由。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. 創(chuàng)建路由實例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們在這里
// 暫時保持簡單
const router = VueRouter.createRouter({
// 4. 內(nèi)部提供了 history 模式的實現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的縮寫
})
// 5. 創(chuàng)建并掛載根實例
const app = Vue.createApp({})
//確保 _use_ 路由實例使
//整個應用支持路由。
app.use(router)
app.mount('#app')
// 現(xiàn)在，應用已經(jīng)啟動了！
嘗試一下 ? 點擊過的導航鏈接都會加上樣式 class ="router-link-exact-active router-link-active"。 <router-link> 相關(guān)屬性接下來我們可以了解下更多關(guān)于 <router-link> 的屬性。 to表示目標路由的鏈接。 當被點擊后，內(nèi)部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象。 <!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結(jié)果 -->
<a href="home">Home</a>
<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 帶查詢參數(shù)，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
replace設置 replace 屬性的話，當點擊時，會調(diào)用 router.replace() 而不是 router.push()，導航后不會留下 history 記錄。 <router-link :to="{ path: '/abc'}" replace></router-link>
append設置 append 屬性后，則在當前 (相對) 路徑前添加其路徑。例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b <router-link :to="{ path: 'relative/path'}" append></router-link>
tag有時候想要 <router-link to="/foo" tag="li">foo</router-link> <!-- 渲染結(jié)果 --> <li>foo</li> active-class設置 鏈接激活時使用的 CSS 類名?？梢酝ㄟ^以下代碼來替代。 <style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
注意這里 class 使用 active-class="_active"。 exact-active-class配置當鏈接被精確匹配的時候應該激活的 class?？梢酝ㄟ^以下代碼來替代。 <p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
event聲明可以用來觸發(fā)導航的事件?？梢允且粋€字符串或是一個包含字符串的數(shù)組。 <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
以上代碼設置了 event 為 mouseover ，及在鼠標移動到 Router Link 1 上時導航的 HTML 內(nèi)容會發(fā)生改變。 |
|
|
來自： wenxuefeng360 > 《待分類1》
