vue路由配置

1、安裝路由，因為路由是vue的乙個外掛程式。

npm (cnpm) install vue-router -d

import vue form 'vue'

import vuerouter from 'vue-router'
vue.use(vuerouter)

// 引入路由

import vuerouter from 'vue-router'

vue.use(vuerouter)

import home from './home'

import me from './me'

// 路由配置

const router = new vuerouter(,

,]})

new vue()

4、很明顯main.js中要引入喝多第三方外掛程式，這樣在main.js中配置路由是不合理的，所以需要在src目錄中建立，config目錄，裡面建立routes.js路由檔案

]})5、路由與導航

router-view：路由坐基

router-link

引數：

1、:to => :to="" 跳轉的路由name
:to="}" 路由跳轉引數
獲取：this.$route.params.id 就可以獲取到引數
export default ,
watch: }}
或者to =>  to="/home" 跳轉路由path
2、active-class="active" 路由啟用樣式，或者直接在路由定義的時候配置全域性
new vuerouter()
3、exact 精確匹配引數，這個很有用，在路由預設 "/"的時候，一般都載入到首頁，也就是"/", "/home"其實載入的是同乙個元件，但是問題來了，這樣路由的啟用樣式就有問題了，不管跳轉到哪個介面 "/"都是出於啟用狀態的，所以需要精確匹配，這樣就解決了這個問題。
4、tag="div" 路由跳轉時候生成html標籤
5、history路由的控制，
push() 預設 push到url目錄中 /a  => /b
replace() 替換當前的url     /a  = /b
替換

routes: [,]

// scoped 標識這個css樣式只對這個元件有用

原始碼github:

案例：

路由**，實現懶載入

import vue from 'vue'

import router from 'vue-router'
import home from '../components/home'
import orderlist from '../components/orderlist'
vue.use(router)
export default new router(,,]
},,,]})

原始碼位址

vue路由配置，vue子路由配置

現在乙個專案已經部署完成，接下來我們從路由開始！還記得在初始化專案的時候，有提示是否需要安裝vue router，對沒錯，vue中路由全靠它！首先找到路由配置檔案 router index.js，是整個專案路由配置檔案 首先看最上面的，這個模組引入，es2015中的import.from.將你需要配...

vue路由配置

1.main.js the vue build version to load with the import command runtime only or standalone has been set in webpack.base.conf with an alias.import vue ...

vue 路由配置

11.2 新增問題 函式觸發路由，採用兩種方式。第一種router link。第二種this.router.push 兩種方式都可以跳轉，但是第二種方式，觸發後，原先繫結的css樣式，無法通過 false 來取消。然後吃完飯回來，我就發現我傻了，我是通過點選來觸發事件，點選後，頁面都跑了，我當然看不...