vue-router 的基本使用

1. 什么是 vue-router

vue-router 是 vue.js 官方給出的路由解決方案。它只能結合 vue 項目進行使用，能夠輕松的管理 SPA 項中組件的切換。

vue-router 的官方文檔地址：https://router.vuejs.org/zh/

2. vue-router 安裝和配置的步驟

① 安裝 vue-router 包
② 創建路由模塊
③ 導入并掛載路由模塊
④ 聲明路由鏈接和占位符

2.1 在項目中安裝 vue-router

在 vue2 的項目中，安裝 vue-router 的命令如下：

2.2 創建路由模塊

在 src 源代碼目錄下，新建 router/index.js 路由模塊，并初始化如下的代碼：

import Vue from 'vue' import VueRouter from 'vue-router' import pathArr from '@/router/pathArr.js'// 導入需要的組件 import Login from '@/components/MyLogin.vue' import Home from '@/components/MyHome.vue'import Users from '@/components/menus/MyUsers.vue' import Rights from '@/components/menus/MyRights.vue' import Goods from '@/components/menus/MyGoods.vue' import Orders from '@/components/menus/MyOrders.vue' import Settings from '@/components/menus/MySettings.vue' import UserDetail from '@/components/user/MyUserDetail.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/', redirect: '/login' },// 登錄的路由規則{ path: '/login', component: Login },// 后臺主頁的路由規則{path: '/home',component: Home,redirect: '/home/users',children: [{ path: 'users', component: Users },{ path: 'rights', component: Rights },{ path: 'goods', component: Goods },{ path: 'orders', component: Orders },{ path: 'settings', component: Settings },// 用戶詳情頁的路由規則{ path: 'userinfo/:id', component: UserDetail, props: true }]}] })// 全局前置守衛 router.beforeEach(function(to, from, next) {if (pathArr.indexOf(to.path) !== -1) {const token = localStorage.getItem('token')if (token) {next()} else {next('/login')}} else {next()} })export default router

2.3 導入并掛載路由模塊

在 src/main.js 入口文件中，導入并掛載路由模塊。示例代碼如下：

官網掛在路由模塊介紹：

// 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')// 現在，應用已經啟動了！

實際開發中：

import Vue from 'vue' import App from './App.vue' // 導入路由模塊，目的：拿到路由的實例對象 // 在進行模塊化導入的時候，如果給定的是文件夾，則默認導入這個文件夾下，名字叫做 index.js 的文件 //相當于import router from '@/router/index.js' //下面的這種寫法，程序會自動導入相應的index.js文件 import router from '@/router'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在 Vue 項目中，要想把路由用起來，必須把路由實例對象，通過下面的方式進行掛載// router: 路由的實例對象//下面是簡寫的方式，相當于： router:router//當key和value的值相同的時候就可以使用簡寫的方式router }).$mount('#app')

2.4 聲明路由鏈接和占位符

在 src/App.vue 組件中，使用 vue-router 提供的router-link標簽和 router-view標簽聲明路由鏈接和占位符：

官網中聲明路由鏈接和占位符：
實際開發中：

<template><div class="app-container"><h1>App2 組件</h1><!-- 當安裝和配置了 vue-router 后，就可以使用 router-link 來替代普通的 a 鏈接了 --><!-- <a href="#/home">首頁</a> --><router-link to="/home">首頁</router-link><!-- 注意1：在 hash 地址中， / 后面的參數項，叫做“路徑參數” --><!-- 在路由“參數對象”中，需要使用 this.$route.params 來訪問路徑參數 --><!-- 注意2：在 hash 地址中，? 后面的參數項，叫做“查詢參數” --><!-- 在路由“參數對象”中，需要使用 this.$route.query 來訪問查詢參數 --><!-- 注意3：在 this.$route 中，path 只是路徑部分；fullPath 是完整的地址 --><!-- 例如： --><!-- /movie/2?name=zs&age=20 是 fullPath 的值 --><!-- /movie/2 是 path 的值 --><router-link to="/movie/1">洛基</router-link><router-link to="/movie/2?name=zs&age=20">雷神</router-link><router-link to="/movie/3">復聯</router-link><router-link to="/about">關于</router-link><hr /><!-- 只要在項目中安裝和配置了 vue-router，就可以使用 router-view 這個組件了 --><!-- 它的作用很單純：占位符 --><router-view></router-view></div> </template><script> export default {name: 'App' } </script><style lang="less" scoped> .app-container {background-color: #efefef;overflow: hidden;margin: 10px;padding: 15px;> a {margin-right: 10px;} } </style>

router-link相當于a標簽，觸發需要加載的頁面，需要加載的頁面被觸發之后，會自動加載到router-view標簽中顯示。

3. 聲明路由的匹配規則

在 src/router/index.js 路由模塊中，通過 routes 數組聲明路由的匹配規則。示例代碼如下：

實際開發中：

// src/router/index.js 就是當前項目的路由模塊 import Vue from 'vue' import VueRouter from 'vue-router'// 導入需要的組件 import Home from '@/components/Home.vue' import Movie from '@/components/Movie.vue' import About from '@/components/About.vue'import Tab1 from '@/components/tabs/Tab1.vue' import Tab2 from '@/components/tabs/Tab2.vue'import Login from '@/components/Login.vue' import Main from '@/components/Main.vue'// 把 VueRouter 安裝為 Vue 項目的插件 // Vue.use() 函數的作用，就是來安裝插件的 Vue.use(VueRouter)// 創建路由的實例對象 const router = new VueRouter({// routes 是一個數組，作用：定義 “hash 地址” 與 “組件” 之間的對應關系routes: [// 重定向的路由規則{ path: '/', redirect: '/home' },// 路由規則{ path: '/home', component: Home },// 需求：在 Movie 組件中，希望根據 id 的值，展示對應電影的詳情信息// 可以為路由規則開啟 props 傳參，從而方便的拿到動態參數的值{ path: '/movie/:mid', component: Movie, props: true },{path: '/about',component: About,// redirect: '/about/tab1',children: [// 子路由規則// 默認子路由：如果 children 數組中，某個路由規則的 path 值為空字符串，則這條路由規則，叫做“默認子路由”{ path: '', component: Tab1 },{ path: 'tab2', component: Tab2 }]},{ path: '/login', component: Login },{ path: '/main', component: Main }] })// 為 router 實例對象，聲明全局前置導航守衛 // 只要發生了路由的跳轉，必然會觸發 beforeEach 指定的 function 回調函數 router.beforeEach(function(to, from, next) {// to 表示將要訪問的路由的信息對象// from 表示將要離開的路由的信息對象// next() 函數表示放行的意思// 分析：// 1. 要拿到用戶將要訪問的 hash 地址// 2. 判斷 hash 地址是否等于 /main。// 2.1 如果等于 /main，證明需要登錄之后，才能訪問成功// 2.2 如果不等于 /main，則不需要登錄，直接放行 next()// 3. 如果訪問的地址是 /main。則需要讀取 localStorage 中的 token 值// 3.1 如果有 token，則放行// 3.2 如果沒有 token，則強制跳轉到 /login 登錄頁if (to.path === '/main') {// 要訪問后臺主頁，需要判斷是否有 tokenconst token = localStorage.getItem('token')if (token) {next()} else {// 沒有登錄，強制跳轉到登錄頁next('/login')}} else {next()} })export default router

總結

以上是生活随笔為你收集整理的vue-router 的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。