vue-router 使用詳情

ps: 以下是vue-router的基本使用，從引入路由依賴開始，大佬繞路，小白可以瞧一瞧，不對的地方多多指教。

在vue項目中如何使用vue-router？

// 可以先跳過下面兩個ps內容

ps 1：路由中幾個容易混淆的字段：router,routes,route。

router：路由對象，經常用this.$router.push()進行路由跳轉。

routes：是一個數組，里面是配置的路由，[{path："/",component：home}]。

route：當前激活的路由的信息，this.$route里面有我們傳入的query、params參數。

ps 2：路由有兩個標簽<router-link>  <router-view>，<router-link> 是用來路由跳轉的，默認會被瀏覽器解析為a鏈接，可以使用tag屬性自定義，如<router-link tag="div"></router-link>則會解析成div元素 ，<router-view>是用來渲染當前路由的組件內容。

1. 安裝vue-router依賴

npm install vue-router --save

2. 在main.js文件中引入路由依賴

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

3. 創建router.js文件，配置路由

ps：我在我的項目里創建了一些vue文件，便於查看路由跳轉效果。

 

import Router from "vue-router"
import index from "./views/index";
import main from "./views/main/main";
import showOne from "./views/showOne";
import showTwo from "./views/showTwo";
const router = new Router({
   routes: [
        {
            path:"/",
            component:index
        },
        {    
            path:"/main",
            component:main,
            children:[
                {
                   path:"/showOne", // path前面加了/，那么跳到這個頁面時候地址前面不用再加/main，即：ip:端口/#/showOne即可
                   name:"one",
                   component:showOne
                },
                {
                   path:"showTwo/:id", // path前面沒有/，那么訪問這個頁面時地址前面要加/main，而且一定要有id參數，即：ip:端口/#/main/showTwo/id
                   name:"two",
                   component:showTwo
                }
            ]
        },
    ]
    
})    
    

4. 修改main.js文件，引入router.js文件

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
import router from "./router.js" // 路由配置文件
import App from "./App.vue"

new Vue({
　　render:h=>h(App),
　　router // 相當於 router:router
}).$mouse("#app")

5. App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
</style>

 

下面是幾個比較重要的文件內容：

1. main.vue,即整體框架頁面

<template>
  <div class="main">
    <top></top>
    <left></left>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import top from "./top";
import left from "./left";
export default {
  name: "mainBox",
  components: {
    top,
    left
  }
};
</script>
<style  scoped>31 </style>

2. left.vue，即框架左側菜單區域

<template>
  <div class="left">
    <div class="tip">我是left左側</div>
    <ul>
      <li>router-link的跳轉方式：</li>
      <li>
        <router-link tag="div" to="/showOne">頁面1</router-link> // tag可以改變router-link被瀏覽器解析的dom，默認是a鏈接
      </li>
      <li>
        <router-link to="/main/showTwo/123">頁面2</router-link>
      </li>
      <li>$router.push跳轉方式</li>
      <li @click="linkOne">頁面1</li>
      <li @click="linkTwo">頁面2</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "top",
  methods: {
    linkOne() {
　　　　// 可以通過name屬性跳轉，也可以通過path

      // this.$router.push({
      //   name: "one",
      // });
      this.$router.push({
        path: "/showOne"
      });
    },
    linkTwo() {
　　　　// params參數會在url上展示，還可以傳query參數
      this.$router.push({
        name: "two",
        params: {
          id: "xxx"
        },
　　　　　query:{
　　　　　　
　　　　　}
      });
    }
  }
};
</script>

3. showTwo.vue文件，框架中頁面2 菜單對應的頁面，獲得路由上的參數，this.$route里面有詳細內容

<template>
  <div class="show-two">
    <div class="tip">我是頁面2</div>
    <div>路由的id參數為：{{paramsId}}</div>
  </div>
</template>
<script>
export default {
  name: "showTwo",
  data() {
    return {
      paramsId: ""
    };
  },
  created() {
    this.paramsId = this.$route.params.id;
    console.log(this.$route);// 輸出路由看看
  }
};
</script>
<style scoped>
</style>