@Author：Runsen
@Date：2020/7/17

管理路由是一項必不可少的功能。今天，Runsen學習Vue Router。

文章目錄

• 安裝Vue Router
• Vue Router使用
• 代碼實戰

安裝Vue Router

Vue Router（官網：https://router.vuejs.org/zh/）是Vue.js官方的路由管理器。

它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程序的開發。

SPA就是 單頁web應用（single page web application，SPA），就是只有一張Web頁面的應用。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。

Vue Router使用

在普通項目中引入vue.js和vue-router.js

在腳手架中import router from './router'，安裝就是npm install vue-router --save-dev

然后就是添加路由鏈接，<router-link></router-link>標簽默認渲染為標簽，to屬性渲染為href屬性。

<router-link to="/hello">打開Hello</router-link>

router-link組件默認會在頁面生成一個a標簽，點擊會跳轉到to屬性對應的地址

添加路由填充位，<router-view></router-view>，將通過路由匹配到的組件渲染到router-view所在的位置

至于為啥不能用a標簽，這是因為用Vue做的都是單頁應用（當你的項目npm run build 打包后，就會生成dist文件夾，這里面只有靜態資源和一個index.html頁面），所以寫的<a></a>標簽跳轉頁面是不起作用的，必須使用vue-router來進行管理。

代碼實戰

下面Runsen創建一個Vue項目，使用命令vue init webpack router，在創建項目的時候選擇router。

這樣在src文件夾下新增一個router文件夾，里面添加一個index.js文件

第一步設置index.js，就是兩個路由

import Vue from 'vue' import Router from 'vue-router' import Home from '../components/Home' import About from '../components/About'Vue.use(Router)export default new Router({routes: [{path: '/about',name: 'About',component: About,meta: {id: '2'}},{path: '/',name: 'Home',component: Home,meta: {id: '1'}}] })

main.js的在創建的項目的時候，因為選中了Router，所以不需要導入Router。

第二步創建兩個組件，Home.vue和About.vue，在加上app.vue主視圖。

Home.vue

<template><div class=""><div>home</div><router-link :to="{name: 'About', params: {a: 1, b: 2}}">跳轉到About</router-link><div @click="$router.push({name: 'About', params: {c: 3, d: 4}})">點我也可以跳轉</div></div> </template>

About.vue

<template><div class="">參數為：{{$route.params}}</div> </template>

app.vue

<template><div id="app">當前路由id：{{$route.meta.id}}<router-view></router-view></div> </template>

下面補充下<router-link>所有屬性及說明

屬性說明

to(必須)	目標路由地址。
replace	替換當前路由，在歷史記錄棧中，用當前路由地址替換上一個路由地址。
append	目標路由地址為相對路徑時有效，添加該屬性，則在當前路徑前添加基路徑。
tag	默認值：“a”，router-link組件渲染在頁面上的標簽名稱。
active-class	默認值：“router-link-activve”，鏈接激活時使用的css類名。

總結

以上是生活随笔為你收集整理的四十三、在Vue使用router，路由的管理的全部內容，希望文章能夠幫你解決所遇到的問題。

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