vue 路由配置

11.2 新增問題：

函數觸發路由，采用兩種方式。第一種router-link。第二種this.$router.push({path:'/address'})

兩種方式都可以跳轉，但是第二種方式，觸發后，原先綁定的CSS樣式，無法通過 false 來取消。

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

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

<router-link> 比起寫死的 <a href="..."> 會好一些，理由如下：

• 無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

• 在 HTML5 history 模式下，router-link 會守衛點擊事件，讓瀏覽器不再重新加載頁面。（默認是hash模式）

• 當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。

如何理解第二點和第三點？具體是什么樣的？

HTML:

            <b :class="{'disabled': isActive}" >
                <router-link :to="toLink(calTotalAmount)">
                    <span>結算(&nbsp;{{calTotalAmount}}&nbsp;)</span>
                </router-link>
            </b>

JS:

            toLink : function(fn) {
                var href = ''
                if (fn > 0) {
                    console.log('可以跳轉')
                    this.isActive = false
//                    this.$router.push({path:'/address'})
                    href          = '/address'
                } else {
                    this.isActive = true
                }
                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 new Router({
    // mode:'history', //去掉瀏覽器 url 的 # 號，但是跳轉到別的頁面時，還會有誒...http://localhost:8080/#/address
  routes: [
    {
      path: '/', component: Index
    },{
          path: '/address', //https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html 動態路由匹配
          component: Address
      },
      { path: '/login', component: Login}
  ]
})

3. 回到index.vue。 index.vue，我好像啥都沒干，這是默認頁

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

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

注釋： router-link標簽渲染時會自動增加一個A標簽帶href路轉。

　　　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>

回到index.vue，在需要的位置下添加這一行：

<router-link to="/login"><p>登錄</p></router-link>

這是效果。

總結： 配置路由三部曲：

1. 新建 .vue 文件。

2. 在router - index.js 下 import 導入新建的.vue，再配置路徑。

3. 在首頁添加 <router-link to="/"></router-link> 標簽

 

但是這里有一個小問題，我不想頁面跳轉。我希望這個登錄頁的內容，點擊后，直接在默認頁上出現。

新建一個項目試試看。

新建項目，按照以上方式建立兩個 .vue，再在路由里配置，可以在本頁出現，有點像點擊切換效果...

估計和我那個項目某個配置有關。