vue a标簽 href寫值_年薪百萬之路--第七十天路由vue-router

安裝路由vue-router

npm i vue-router -S   下載下傳

配置路由 > 初始化路由對象

在src目錄下建立routes路由目錄，在router目錄下建立index.js路由檔案

index.js路由檔案中，編寫初始化路由對象的代碼 .

// 1. 引入vue和vue-router元件核心對象，并在vue中通過use注冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

// 2. 暴露vue-router對象，并在vue-router裡面編寫路由，提供給main.js調用
export default new Router({
  // 設定路由模式為‘history’，去掉預設的#
  mode: "history",
  routes:[
    // 路由清單
    // {
    //   name:"路由名稱[對應元件的name值，将來用于跳轉頁面]",
    //   path: "通路url路徑",
    //   component: 元件名
    // },
  ]
})

注冊路由資訊

打開main.js檔案，把router路由規則對象注冊到vue中

// 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 from 'vue'
import App from './App'
import router from './router/index';

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

>在視圖中顯示路由對應的内容

在App.vue元件中，添加顯示路由對應的内容

<template>
  <div id="app">
    <!-- 标簽名必須是這個rouer-view -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

路由對象提供的操作

在我們安裝注冊了vue-router元件以後，vue-router在vue項目中會幫我們在全局範圍内所有元件裡面建立2個對象給我們使用：

this.$router ，可用于在js代碼中進行頁面跳轉。
this.$route ，可用于擷取位址欄上面的url參數。

>頁面跳轉

在vue-router提供的操作中，進行頁面跳轉有2種方式：

使用 <router-link to="url位址"> 來跳轉
在 <script> 中使用 this.$router.push(url位址)
來跳轉

在
<script> 中還可以使用 this.$router.go(整數) ，表示跳轉傳回上一頁或者上幾頁，下一個或者下幾頁

第一種方法

routes/index.js

// 1. 引入vue和vue-router元件核心對象，并在vue中通過use注冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router對象，并在vue-router裡面編寫路由，提供給main.js調用

// 導入元件
// import 元件名 from "../components/元件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由位址的顯示模式： 預設hash，表示位址欄上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應元件的name值，将來用于跳轉頁面]",
    //   path: "通路url路徑",
    //   component: 元件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user",
      component: User
    },
  ],
});

// vue-router除了可以進行元件和url位址的綁定以外，還可以
// 進行不同元件的頁面跳轉，

Home.vue代碼

<template>
    <div>
      首頁頁面元件
      <a href="/user" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人中心</a>
      <!-- router-link标簽，本質上就是a标簽，隻是由vue-router進行加工處理
      可以顯示局部頁面重新整理，不會重新加載内容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

第二種方法

<template>
    <div>
      首頁頁面元件
      <a href="/user" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人中心</a>
      <!-- router-link标簽，本質上就是a标簽，隻是由vue-router進行加工處理
      可以顯示局部頁面重新整理，不會重新加載内容，進行ajax跳轉
       -->
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>

參數傳遞

vue-router

提供了

this.$route

，可以讓我們接收來自其他頁面的附帶參數。參數有2種：

查詢字元串( query string )，就是位址欄上面 ?
号後面的參數，

例如：
http://localhost:8008/user?name=xiaoming&pwd=123 ，這裡 name=xiaoming&pwd=123 就是查詢字元串參數。
路由參數( router params
)，就是位址欄上面路由路徑的一部分，

例如：
http://localhost:8080/user/300/xiaoming ，此時，300屬于路由路徑的一部分，這個300就是路由參數.，當然，xiaoming,或者user也可以了解是路由參數，就是看我們的頁面中是否需要接收而已。

>擷取查詢字元串

必須先有一個頁面跳轉發送參數。例如，在Home元件中跳轉到User元件中，需要傳遞name和pwd查詢字元串。

Home.vue代碼：

<template>
    <div>
      首頁頁面元件
<!--      <a href="/user" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人中心</a>
      &lt;!&ndash; router-link标簽，本質上就是a标簽，隻是由vue-router進行加工處理
      可以顯示局部頁面重新整理，不會重新加載内容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字元串參數</router-link>
      <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字元串參數</router-link>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行權限，登入之類的判斷，然後再進行跳轉
                // this.$router.back(); // 傳回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 傳回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站内的制定位址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外位址，記得加上http://協定" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" 
          }
        }
    }
</script>

<style scoped>

</style>

2. 可以下一個頁面中，這裡代表的就是User元件，接收來自Home元件的參數。

<template>
    <div>
      使用者中心頁面元件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收位址欄上面的參數
            // this.$route是vue-router提供的一個用于接收位址參數的對象。
            // 經過main.js裡面注冊router對象以後，
            // 将來在所有的子元件中，可以通過this.$route來擷取參數或者通過this.$router跳轉頁面
            // 查詢字元串參數
            // query是this.$route裡面的一個數組，this.$route會自動收集位址欄上所有的參數儲存到query裡面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``裡面，${}圈住的内容會被js當成變量來解析
        }
    }
</script>

<style scoped>

</style>

>擷取路由參數

src/routes/index.js設定路由參數。

// 1. 引入vue和vue-router元件核心對象，并在vue中通過use注冊vue-router元件
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router); // Router是類
// 2. 暴露vue-router對象，并在vue-router裡面編寫路由，提供給main.js調用

// 導入元件
// import 元件名 from "../components/元件名"
import Home from "../components/Home";
import User from "../components/User";

export default new Router({
  mode:"history",  // 路由位址的顯示模式： 預設hash，表示位址欄上面出現#
  routes:[
    // {
    //   name:"路由名稱[對應元件的name值，将來用于跳轉頁面]",
    //   path: "通路url路徑",
    //   component: 元件名
    // },
    {
      name:"Home",
      path: "/",
      component: Home
    },{
      name:"User",
      path: "/user/:id/img-:img_id",
      component: User
    },
  ],
});

// vue-router除了可以進行元件和url位址的綁定以外，還可以
// 進行不同元件的頁面跳轉，

然後我們就是在Home中如果需要轉到User裡面。

Home.vue代碼：

<template>
    <div>
      首頁頁面元件
<!--      <a href="/user" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人中心</a>
      &lt;!&ndash; router-link标簽，本質上就是a标簽，隻是由vue-router進行加工處理
      可以顯示局部頁面重新整理，不會重新加載内容，進行ajax跳轉
       &ndash;&gt;
      <router-link to="/user">個人中心</router-link>
      <router-link :to="url">個人中心</router-link>
      <router-link :to="{name:'User'}">個人中心</router-link>
      <button @click="jump">個人中心</button>-->

<!--      <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字元串參數</router-link>-->
<!--      <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字元串參數</router-link>-->
      <router-link to="/user/100/img-10086">路由參數</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
        methods:{
          jump(){
              // 開發中可以先進行權限，登入之類的判斷，然後再進行跳轉
                // this.$router.back(); // 傳回上一頁，本質上就是 location.back()
                // this.$router.go(-1); // 傳回上一頁，本質上就是 location.go()
                // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward()
                this.$router.push("/user"); // 跳轉到站内的制定位址頁面中，本質上就是 location.href
                // 注意,this.$router.push 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外位址，記得加上http://協定" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" 
          }
        }
    }
</script>

<style scoped>

</style>

User.vue，元件中可以通過

this.$route.params

接收路由參數。

<template>
    <div>
      使用者中心頁面元件
    </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            // 接收位址欄上面的參數
            // this.$route是vue-router提供的一個用于接收位址參數的對象。
            // 經過main.js裡面注冊router對象以後，
            // 将來在所有的子元件中，可以通過this.$route來擷取參數或者通過this.$router跳轉頁面

            // 查詢字元串參數
            // query是this.$route裡面的一個數組，this.$route會自動收集位址欄上所有的參數儲存到query裡面
            // let name = this.$route.query.name;
            // let pwd = this.$route.query.pwd;
            // console.log(`name=${name}&pwd=${pwd}`);  // ``裡面，${}圈住的内容會被js當成變量來解析

            // 路由參數
            // params是this.$route裡面的一個數組，this.$route會自動收集路由清單中已經标記為路由參數所有内容儲存到params中
            let id = this.$route.params.id;
            console.log(id);
            let img_id = this.$route.params.img_id;
            console.log(`img_id = ${img_id}`);
        }
    }
</script>

<style scoped>

</style>

ElementUI元件架構

npm i element-ui -S     安裝

配置

main.js

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

vue a标簽 href寫值_年薪百萬之路--第七十天路由vue-router

繼續閱讀

uniapp路由傳多個參數_「vue基礎」一篇淺顯易懂的 Vue 路由使用指南（ Vue Router 下）...Navigation路由守衛(Navigation Guards)守衛小節練習：帶權限驗證路由的例子小節vue基礎相關文章

vue router name命名規範_【面試需要Vue全家桶】一文帶你看透Vue前端路由da1da2da3da4

export default (imported as router) was not found_History API 與 vue-router路由中#的解析 - 一文g

vue 擷取url位址的參數_vue-router 基礎：3種路由參數傳遞的示例前言參數傳遞總結

vue router name命名規範_「Vue學習記錄六」vue-router路由 (轉載)

router中擷取vuex_vue項目實踐（vuex + vue-router + vue-resource）

vue 擷取url位址的參數_2020年 vue常見面試問題總結(幹貨)！

vue router name命名規範_[譯]用Pusher和vue.js建立一個即時聊天app

vue :class 動态綁定樣式_vue基礎那點事

vue 元件以字元串插入_Vue有什麼特性，相對于其他架構都有那些優勢！内部指令生命周期

vue key重複_Vue 出場率99%的面試題

vue禁止輸入位址欄直接通路頁面_前端新手 Vue應用部署到伺服器的正确方式

vue a标簽 href寫值_web前端Vue項目實戰-Music

vue push時對象錯亂_vue最最最常見的面試題--總結

vue + element-ui 聊天_通過 Laravel 建立一個 Vue 單頁面應用（一）

vue a标簽 href寫值_vue技術點及面試題更新之—55

vue a标簽 href寫值_年薪百萬之路--第七十天 路由vue-router

繼續閱讀

vue a标簽 href寫值_年薪百萬之路--第七十天路由vue-router