vue router 路由配置

前提：

專案由 vue-cli 腳手架建立。

npm install vue-router

安裝完成後，執行專案

npm run dev

開啟 main.js ， 引入並使用 vue-router

import vuerouter from

"vue-router
"vue.use(vuerouter)

引入建立好的元件

import home from

"./components/home.vue
"import news 
from
"./components/news.vue
"

配置路由： （  // 此項表示，預設載入）

const routes =[

,  ,
/*預設跳轉路由
*/]

例項化 vuerouter

const router = new

vuerouter()

vue例項中掛載路由：

new

vue()

現在，我們就可以看到 home 元件內容了，

再引入， router-link 設定路由導航，to 屬性 指定鏈結

"/

home
">主頁
"/news
">新聞頁

此時，乙個簡單的路由就搭建好了

vue router 配置路由

vue router 配置路由 用 vue.js vue router 建立單頁應用，是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式，當你要把 vue router 新增進來，我們需要做的是，將元件 components 對映到路由 routes 然後告訴 vue rout...

vue router路由屬性配置說明

export default newrouter 命名檢視元件 redirect string location function 重定向 props boolean string function 路由元件傳遞引數 alias string array 路由別名 children array 巢狀...

vue router路由巢狀

巢狀路由顧名思義就是路由的多層巢狀。結合vue router仿天貓底部導航欄，給元件me新增巢狀路由，也叫子路由。總共新增兩個子路由，分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置，需要使用children陣列來定義子...