vue學習筆記 路由基礎

一、前面我們提到過單頁面富應用階段，那就要依靠我們的前端路由

vue-router

二、配置安裝路由

2、在router資料夾下的index.js中學相關的路由配置**　　　

//首先匯入路由

import vuerouter from 'vue-router'
import vue from 'vue'

3.這裡我們同時還要匯入vue，使用vue.use安裝外掛程式到當前vue程式

//第一步，通過vue.use安裝外掛程式

vue.use(vuerouter)

4、現在建立路由物件，在路由物件中對路由進行相關配置，這裡乙個path對應乙個元件 值得一提的是一般路由的path有「/」

而巢狀路由中不能有『/』 巢狀路由在children陣列中進行設定，這裡的元件都需要import相關的元件

const home = () =>

import ('../components/home.vue')
const user = () =>
import ('../components/user.vue')
const about = () =>
import ('../components/about.vue')
const homenews = () =>
import ('../components/homenews.vue')
const homemessage = () =>
import ('../components/homemessage.vue')

//建立vuerouter物件

const routes = [
//建立路由元件,,
,]},,
]

5、在配置好path和元件的對映關係後，我們就可以根據上面我們配置的路由建立乙個路由了

const router = new vuerouter()

6、最後匯出，然後在vue的入口檔案中掛在路由

router資料夾下的index.js中

export default router

根目錄下的main.js中

new vue()

7、在vue中渲染路由

我們一般使用router-link來渲染路由

首頁

關於使用者

當然你也可以用button啊或者其他的來渲染路由元件，但這需要用method繫結事件

首頁

關於  methods: ,
aboutclick()
},

這裡我要說一下$router和$route的區別，前者是我們再建立vue-router（總的路由）物件時候會有乙個全域性的￥router物件

後者是當前正在活躍的路由的物件

vue學習筆記 路由

1 路由配置 在vue.config中配置，則在 中可以使用 來表示src目錄下 import aa from aa index.js 2 單頁面可以懶載入 3 建立動態路由 路由中定義 載入同乙個元件頁面 argu.vue，根據不同的name 顯示不同的東西 vue元件中獲取資料 route.pa...

Vue 學習筆記 路由篇

官網 安裝外掛程式 npm install vue router安裝完之後在package.json裡面檢視版本 1 首先新建要跳轉的vue檔案 在src component裡面新建乙個about.vue檔案 template div class container p this is about ...

vue路由基礎

router link類似於a標籤，用於在單頁面之間的跳轉，預設渲染為a標籤 to屬性,後面跟著用於跳轉的路徑 tag屬性，指定渲染成指定的標籤 tab p router link active,自動啟用的class名稱，當 to 屬性的值和位址列路徑相同自動啟用該屬性。4.linkactivecl...