vue 路由配置

11.2 新增問題：

函式觸發路由，採用兩種方式。第一種router-link。第二種this.$router.push()

兩種方式都可以跳轉，但是第二種方式，觸發後，原先繫結的css樣式，無法通過 false 來取消。

然後吃完飯回來，我就發現我傻了，我是通過點選來觸發事件，點選後，頁面都跑了，我當然看不到樣式改變啊。

所以老老實實用 router-link吧。

比起寫死的會好一些，理由如下：

html:

<

b :class
="">
<
router-link 
:to="tolink(caltotalamount)"
>
<
span
>結算( } )
span
>
router-link
>
b>

tolink : function

(fn) )
href          = '/address'} 
else
return
href
}

今天準備細細捋一遍vue + webpack 專案的路由配置。

專案背景：

1. v-cli 腳手架搭建

2. 基於webpack

專案的src目錄結構如下：

下面來捋一遍步驟

1. 新建乙個page資料夾，建立 index.vue 檔案，準備把這個頁面作為專案 npm run dev後的預設顯示頁。

2. 在router資料夾下的 index.js 配置路由。

import vue from 'vue'import router from 'vue-router'import index from '@/page/index'

import address from '@/page/address'import login from '@/components/login'
vue.use(router) //這裡別漏掉了
export 
default
newrouter(,,
]})

下面說說用 這倆標籤的方式：

<

router-link 
to="/"
>
router-link
>
<
router-view
>
router-view
>

router-view標籤是將路由過來的元件渲染在什麼地方。（實際實驗了下，感覺不太能理解。一會做下實驗看看）

4. 在components 下建立乙個login.vue 。

<

template
>
<
div>
<
h1>i'm login, i'm not ready
h1>
<
h2>隨便寫點什麼
h2>
div>
template
>
<
script
>
script
>
<
style
>
style
>

<

router-link 
to="/login"
><
p>登入
這是效果。
總結： 配置路由三部曲：
1. 新建 .vue 檔案。
2. 在router - index.js 下 import 匯入新建的.vue，再配置路徑。
3. 在首頁新增  標籤
但是這裡有乙個小問題，我不想頁面跳轉。我希望這個登入頁的內容，點選後，直接在預設頁上出現。
新建乙個專案試試看。
新建專案，按照以上方式建立兩個 .vue，再在路由裡配置，可以在本頁出現，有點像點選切換效果...
估計和我那個專案某個配置有關。
				
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路由配置
1 安裝路由，因為路由是vue的乙個外掛程式。npm cnpm install vue router d2 在main.js中引入路由 import vue form vue import vuerouter from vue router vue.use vuerouter 3 在main.js中...