技術標籤：VUEvue

Vue-Router 官網

官方介紹

Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

• 巢狀的路由/視圖表
• 模組化的、基於元件的路由配置
• 路由引數、查詢、萬用字元
• 基於 Vue.js 過渡系統的檢視過渡效果
• 細粒度的導航控制
• 帶有自動啟用的 CSS class 的連結
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

npm 安裝 npm install --save -dev vue-router

基本使用

1、新建router 資料夾，存放路由相關檔案

2、router > index.js 設定註冊 router和路由

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入相關元件
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Sports from '../views/Sports.vue'
Vue.use(VueRouter)
let router = new VueRouter({
    routes:[
        {
            //路由地址
            path:'/home',
            //對應路由顯示對應元件
            component:Home
        }
        ........
    ]
})
export default router
 

3、在main.js中 註冊router

import Vue from 'vue'
import App from './App.vue'
import iviewUi from 'view-design'
import 'view-design/dist/styles/iview.css'
import elementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './lang/index'
//全域性引入Grid
import {Grid,GridItem} from './components/Grid/index'
Vue.use(elementUi)
Vue.use(iviewUi)
Vue.use(Grid)
Vue.use(GridItem)


import router from './router/index'
new Vue({
  render: h => h(App),
  i18n,
  router
}).$mount('#app')
 

4、在App.vue中設定一個 router-view 元件，這是內建元件，作用是顯示路由跳轉的元件頁面

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

瀏覽器中 輸入http://localhost:8080/sports#/home

即可顯示元件頁面

路由宣告式導航

1、to屬性

之前是收到輸入url，沒有任何觸發條件，這裡可以通過 router-link設定點選跳轉的元素

router-link 元件預設渲染為帶有連結的a標籤

router-link 元件 to 是必須屬性

<router-link to='home'>點選跳轉到home</router-link>

2、tag屬性

router-link 元件預設渲染為帶有連結的a標籤，通過tag屬性進行配置預設顯示 如如 tag設定為 li

<router-link to='home' tag="li">點選跳轉到home</router-link>

3、active-class屬性

active-class屬性的作用是新增被啟用的class類名

<router-link to='home' tag="li" active-class="aclass">點選跳轉到home</router-link>

如果不設定active-class此時預設被啟用的class類名是.router-link-active

配置全域性的 預設啟用class

router>index.js中

let router = new VueRouter({
    linkActiveClass: 'is-active',
    routes: [{
            // 路由地址
            path: '/home',
            // 對應的路由顯示的元件
            component: Home
        },
        {
            path: '/sport',
            component: Sport
        }
    ]
})

4、exact屬性

exact屬性是精確匹配

比如路由地址有/add和/add/a，如果觸發了/add/a，此時/add的路由也會被啟用class狀態

設定exact來精確匹配

<router-link to='/home' exact exact-active-class="eclass" tag="li">點選跳轉到home</router-link>

exact-active-class="eclass" 精確匹配時的 被啟用class配置

5、event屬性

通過event屬性設定router-link被觸發的方式

<router-link to='/home' event='mouseenter' tag="li">點選跳轉到home</router-link>

此時觸發的方式是 mouseenter

6、replace屬性

路由跳轉有 router和replace，如果是router會記錄跳轉地址，replace 不會記錄

<router-link to='/home' replace tag="li">點選跳轉到home</router-link>
<router-link to='/home/add' replace tag="li">點選跳轉到home/add</router-link>

replace 模式下不 瀏覽器不能返回上次的地址

7、append屬性

append屬性是在當前的路由基礎之上，進行累加，而不是重構

<router-link to='home' appendtag="li">點選跳轉到home</router-link>
<router-link to='sport'appendtag="li">點選跳轉到sport</router-link>

此時頁面會有反覆累加的狀態

注意，如果需要設定需要append狀態的路由，前面不加 "/"