vue-router `＜router-link＞` 相關屬性 vue-路由配置和使用步驟整理

vue-routerhtml

實例

Vue.js + vue-router 能夠很簡單的實現單頁應用。vue

<router-link> 是一個組件，該組件用於設置一個導航連接，切換不一樣 HTML 內容。 to 屬性爲目標地址，即要顯示的內容。vue-router

如下實例中咱們將 vue-router 加進來，而後配置組件和路由映射，再告訴 vue-router 在哪裏渲染它們。代碼以下所示：npm

HTML 代碼編程

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 
<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>

JavaScript 代碼數組

// 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({
  router
}).$mount('#app')
 
// 如今，應用已經啓動了！

`<router-link>` 相關屬性

接下來咱們能夠了解下更多關於的屬性。app

to
表示目標路由的連接。當被點擊後，內部會馬上把 to 的值傳到 router.push()，因此這個值能夠是一個字符串或者是描述目標位置的對象。模塊化

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<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>

<!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace
設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，導航後不會留下 history 記錄。this

<router-link :to="{ path: '/abc'}" replace></router-link>

append
設置 append 屬性後，則在當前 (相對) 路徑前添加其路徑。例如，咱們從 /a 導航到一個相對路徑 b，若是沒有配置 append，則路徑爲 /b，若是配了，則爲 /a/burl

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag
有時候想要渲染成某種標籤，例如

。因而咱們使用 tag prop 類指定何種標籤，一樣它仍是會監聽點擊，觸發導航。
```
<router-link to="/foo" tag="li">foo</router-link>

<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
聲明能夠用來觸發導航的事件。能夠是一個字符串或是一個包含字符串的數組。
```
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
```
以上代碼設置了 event 爲 mouseover ，及在鼠標移動到 Router Link 1 上時導航的 HTML 內容會發生改變。

詳細參考：https://www.runoob.com/vue2/vue-routing.html
https://www.cnblogs.com/yesu/p/8035518.html
https://www.cnblogs.com/shangyixuan/p/10436023.html

vue-路由配置和使用步驟整理

安裝
本地環境安裝路由插件vue-router： cnpm install vue-router --save-dev

*沒有安裝淘寶鏡像的能夠將 cnpm 替換成 npm

配置
兩種配置方法：在main.js中 || 在src/router文件夾下的index.js中

這裏只說在src/router/index.js中的

1.引入：
```
import Vue from 'vue'
 
import Router from 'vue-router'
```
注意這個Router是自定義的名字，這裏叫這個名字後，下邊都要用到的

2. 使用/註冊：
```
Vue.use(Router)
```
3. 配置

配置路由：
```
export default new Router({
  routes: [
   {
        path : ‘/’,  //到時候地址欄會顯示的路徑
        name : ‘Home’,
        component :  Home   // Home是組件的名字，這個路由對應跳轉到的組件。。注意component沒有加「s」.
    },
    {
        path : ‘/content’,
        name : ‘Content’,
        component :  Content
    }
],
    mode: "history"
})
```
4. 引入路由對應的組件地址：
```
import Home from '@/components/Home'
 
import Home from '@/components/Content’
```
5. 在main.js中調用index.js的配置：
```
import router from './router'
```
6. App.vue頁面使用（展現）路由：

把這個標籤放到對應位置：
```
<router-view></router-view>
```
7. 路由切換（原來的等地方）：把切換標籤和連接改爲：
```
<router-link  to="/">切換到Home組件</router-link>
 
<router-link  to="/content">切換到Content組件</router-link>
```
//這裏，to裏邊的參數和配置時，path的路徑同樣便可、

8.vue-router 獲取url後面的參數
1.在路由中設置path：
```
import register from '@/pages/login/register'
 {
    path: '/register',
    name: 'register',
    component: register
```
}
若是有的參數可傳可不傳，使用？傳參
例如：http://192.168.1.12:8080/#/register/?id=123
2.獲取的時候：
```
let id = this.$route.query.id
```
這樣即便取不到參數，頁面也不會報錯

vue-router傳遞參數注意點 1.命名路由搭配params，刷新頁面參數會丟失 2.查詢參數搭配query，刷新頁面數據不會丟失 3.接受參數使用this.$router後面就是搭配路由的名稱就能獲取到參數的值

vue-router `＜router-link＞` 相關屬性 vue-路由配置和使用步驟整理

實例

<router-link> 相關屬性

vue-路由配置和使用步驟整理

`<router-link>` 相關屬性