詳解Vue-Router的安裝與使用

目錄

安裝

1.在已有Vue項目中手動(dòng)安裝vue-router

npm install --save vue-router

2.使用vue-cli創(chuàng )建自帶vue-router的新項目
空格選擇/取消 a全選 i反選

vue create project_name
#Vue 會(huì )詢(xún)問(wèn)你使用哪種配置
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features 

#請選擇 Manually select features,Vue會(huì )詢(xún)問(wèn)你當前項目需要哪些配置

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing   
#請將Router 選中,后面一系列的詢(xún)問(wèn)按照實(shí)際情況進(jìn)行選擇就好

路由的基礎配置

1. 如果選擇了第一種安裝方式(手動(dòng)安裝)，需要手動(dòng)在src文件夾下新建一個(gè)名為router的文件夾并新建index.js文件
2. 如果選擇了第二種安裝方式(自定義安裝)，不用自己進(jìn)行配置，新建項目完畢后就可以直接使用了

將Router安裝到Vue中

如果需要讓當前Vue實(shí)例支持路由功能.需要在Vue實(shí)例化時(shí)將VueRouter的實(shí)例對象注入到Vue實(shí)例配置選項router中。(手動(dòng)安裝)

// src/router/index.js

import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter() // 初始化VueRouter

new Vue({  
  router // 將VueRouter的實(shí)例對象配置到Vue實(shí)例化配置對象的router選項中
}).$mount('#app')

main.js中引用

// src/main.js

import router from './router'

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

Router的相關(guān)配置

注意 嚴格匹配link標簽to路由路徑必須全等于當前瀏覽器的url,非嚴格匹配當前瀏覽器url可以為當前l(fā)ink的子路由。

例子

to="/home"   url="/home/user" 非嚴格匹配
to="/home"   url="/home/user/10086" 非嚴格匹配
to="/home"   url="/home"  嚴格匹配
to="/"       url="/order" / 是所有路由的根路由,所以他們非嚴格匹配

Router.routes 的相關(guān)配置

{
  path: string,
  component?: Component, // 當前路由匹配時(shí)顯示的路由組件
  name?: string, // 命名路由
  redirect?: string | Location | Function, // 路由重定向
  props?: boolean | Object | Function,  // 
  alias?: string | Array<string>, // 路由別名
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由守衛
  caseSensitive?: boolean, // 匹配規則是否大小寫(xiě)敏感？(默認值：false)
}

實(shí)現一個(gè)簡(jiǎn)單的路由

1.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home'
import Order from './views/Order'
import User from './views/User'

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/order',
      component: Order
    },
    {
      path: '/user',
      component: User
    }
  ]
})

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

2. 在組件中實(shí)現路由

VueRouter給Vue提供了兩個(gè)組件

• router-link
• router-view
  

1. router-link 用于實(shí)現路由的跳轉組件:該組件支持的屬性

to: string | location 當用戶(hù)點(diǎn)擊該組件時(shí)就會(huì )跳轉至to指定的路由

// 導航指定的url
<router-link to="/home">主頁(yè)</router-link>
<router-link to="/order">訂單</router-link>
<router-link to="/user">用戶(hù)</router-link>
/* 導航指定的location
vue router中location對象的常用屬性{
    path:'/', //指定跳轉路由的路徑
    hash:'#top' // 指定跳轉路由的哈希值 
    name: 'Home', // 指定跳轉的具名路由的name值
    params: {}, // 指定跳轉的路由傳遞params對象
    query: {} //  指定跳轉的路由傳遞query鍵值對
}
*/
<router-link :to="{path:'/user'}">user</router-link>
// 使用location進(jìn)行頁(yè)面跳轉時(shí),當前l(fā)ocation的params屬性無(wú)法傳遞給路由組件的
<router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// 使用name路由導航,可以向任何具名路由傳遞params
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// query支持 name導航和path導航,不推薦傳遞對象屬性時(shí)使用query傳參
<router-link :to="{name:'User',hash:'#top',query:{id:1,name:'小明'}}">user</router-link>

replace: bool 當該屬性為真時(shí),路由的跳轉將以替換的形式跳轉到下一個(gè)頁(yè)面(下一個(gè)路由會(huì )把當前瀏覽器歷史記錄棧中的url替換成將要跳轉的路由),默認值為false

// 使用替換的形式跳轉路由
<router-link class="tab-item" replace to="/user">用戶(hù)</router-link>

append: bool 當該屬性為真時(shí),當前路由如果是相對路徑(路徑?jīng)]有/開(kāi)頭)路由的跳轉將會(huì )基于瀏覽器url進(jìn)行下一級的跳轉,默認值為false

// 如果當前瀏覽器url /order
// 點(diǎn)擊 Gec 會(huì )跳轉到 /order/gec
<router-link  to="gec" append>Gec</router-link>
// 點(diǎn)擊 Gec1 因為Gec1的to不是相對路徑 append就會(huì )無(wú)效,路由會(huì )跳轉到 /gec
<router-link  to="/gec" append>Gec1</router-link>
// 點(diǎn)擊 Gec2 沒(méi)有append 會(huì )跳轉到 /gec
<router-link  to="gec">Gec2</router-link>

tag: string 指定當該router-link標簽最終以什么DOM元素渲染到頁(yè)面上,默認值是a

// 將router-link以span元素渲染到頁(yè)面上
<router-link tag="span" class="tab-item" to="/">主頁(yè)</router-link>

active-class: string 指定當前router-link元素,如果與瀏覽器url非嚴格匹配時(shí)class名。默認值是VueRouter實(shí)例化時(shí) linkActiveClass 指定值

// 當前router-link非嚴格匹配時(shí)class名為aaaa
<router-link  active-class="aaaa" to="/order">訂單</router-link>

event: string | Array<string> 指定當前router-link元素,聲明可以用來(lái)觸發(fā)導航的事件?？梢允且粋€(gè)字符串或是一個(gè)包含字符串的數組。默認值是click

// 雙擊 和 點(diǎn)擊都能觸發(fā)當前元素的路由跳轉
<router-link :event="['dblclick','click']"  to="/">主頁(yè)</router-link>

2. router-view 根據當前VueRouter的配置,當路由路由路徑發(fā)生改變時(shí)渲染對應的路由視圖組件

router-view 組件是一個(gè) functional 組件，渲染路徑匹配到的視圖組件。 渲染的組件還可以?xún)惹蹲约旱?nbsp;router-view，根據嵌套路徑，渲染嵌套組件。 其他屬性 (非 router-view 使用的屬性除name) 都直接傳給渲染的組件，很多時(shí)候，每個(gè)路由的數據都是包含在路由參數中。

因為它也是個(gè)組件，所以可以配合 transition 和 keep-alive 使用。如果兩個(gè)結合一起用，要確保在內層使用 keep-alive：

<transition name="fade">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

以上就是詳解Vue-Router的安裝與使用的詳細內容，更多關(guān)于Vue-Router的安裝與使用的資料請關(guān)注腳本之家其它相關(guān)文章！