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

管理路由是一項(xiàng)必不可少的功能。今天，Runsen學(xué)習(xí)Vue Router。

文章目錄

• 安裝Vue Router
• Vue Router使用
• 代碼實(shí)戰(zhàn)

安裝Vue Router

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

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

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

Vue Router使用

在普通項(xiàng)目中引入vue.js和vue-router.js

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

然后就是添加路由鏈接，<router-link></router-link>標(biāo)簽?zāi)J(rèn)渲染為標(biāo)簽，to屬性渲染為href屬性。

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

router-link組件默認(rèn)會在頁面生成一個(gè)a標(biāo)簽，點(diǎn)擊會跳轉(zhuǎn)到to屬性對應(yīng)的地址

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

至于為啥不能用a標(biāo)簽，這是因?yàn)橛肰ue做的都是單頁應(yīng)用（當(dāng)你的項(xiàng)目npm run build 打包后，就會生成dist文件夾，這里面只有靜態(tài)資源和一個(gè)index.html頁面），所以寫的<a></a>標(biāo)簽跳轉(zhuǎn)頁面是不起作用的，必須使用vue-router來進(jìn)行管理。

代碼實(shí)戰(zhàn)

下面Runsen創(chuàng)建一個(gè)Vue項(xiàng)目，使用命令vue init webpack router，在創(chuàng)建項(xiàng)目的時(shí)候選擇router。

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

第一步設(shè)置index.js，就是兩個(gè)路由

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的在創(chuàng)建的項(xiàng)目的時(shí)候，因?yàn)檫x中了Router，所以不需要導(dǎo)入Router。

第二步創(chuàng)建兩個(gè)組件，Home.vue和About.vue，在加上app.vue主視圖。

Home.vue

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

About.vue

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

app.vue

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

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

屬性說明

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。