Vue-router的使用[vue3.0版本]

一、Vue-router
二、Vue項目實現路由跳轉
1.Vue腳手架創建項目，安裝對應模塊
2.最簡單的Vue-router路由機制
3.動態路由
3.1靜態部分
3.2獲取動態部分
4.嵌套路由
5.命名路由

一、Vue-router

vue-router有三個概念 route, routes, router。

1、route，一條路由，它是單數，點擊內容后跳轉到指定內容，home按鈕 => home內容， 這是一條route, about按鈕 => about 內容， 這是另一條路由。

2、routes ，一組路由，所有路由組合形成的一個數組。
[ {home 按鈕 =>home內容 }， { about按鈕 => about 內容} ]

3、router 是一個機制，相當於一個管理者，來管理路由。
routes 只是定義了一組路由，它放在那里是靜止的，當請求來了，怎么辦？ 就是當用戶點擊home按鈕的時候，怎么辦？這時router會到routes 中去查找，去找到對應的 home內容，所以頁面中就顯示了 home內容。

4、客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home內容的時候，about 中的內容全部隱藏，反之也是一樣。

客戶端路由有兩種實現方式：基於hash 和基於html5 history api（可參考這篇文章：https://blog.csdn.net/qq_44827845/article/details/119819702?spm=1001.2014.3001.5501）

二、Vue項目實現路由跳轉

1.Vue腳手架創建項目，安裝對應模塊

1.vue create vue-routerDemo（必須有vue-cli）

2.安裝所有需要的模塊

components:通用組件，比如分頁
views：組件，通常寫事件，判斷的內容

2.最簡單的Vue-router路由機制

1.在components文件夾下新建兩個vue文件：home.vue+about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 組件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about組件'
            }
        }
    }
</script>

2.在 App.vue中 定義<router-link>和</router-view>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定義點擊后導航到哪個路徑下 -->
      <router-link to="/home">Home</router-link>
      &nbsp;&nbsp;&nbsp;
      <router-link to="/about">About</router-link>
    </header>
    <!-- 對應的組件內容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {

}
</script>

3.在router文件夾下的定義router.js, 就是定義路徑到組件的映射。

import { createRouter, createWebHistory } from 'vue-router'
// import VueRouter from "vue-router";
// import Vue from "vue";
import home from '../components/home.vue';
import about from '../components/about.vue';

// Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/about',
    component: about
  },
  // 重定向
  {
    path: '/', 
    redirect: '/home' 
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router;

最開始因為我是采用最新的腳手架安裝的是vue3.0，而很多文章使用的是vue2.0

我運行之后爆錯：
Uncaught TypeError:Cannot read property ‘use‘ of undefined
因為版本不對。
它們的區別：vue3.0采用createRouter，不采用Vue.use(VueRouter)

4.在main.js中引入路由，注入到根實例中。

import { createApp } from 'vue'
// import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
// import store from './store'

createApp(App).use(router).mount('#app');

// vue 2.0寫法
// new Vue({
//   el: '#app',
//   router,  // 注入到根實例中
//   render: h => h(App)
// })

同樣，版本區別：Vue 3 文檔聲明一個Vue實例使用的createApp()。

5.結果

可以看到，router-link渲染為a標簽，to渲染為href屬性。

同時，會發現選中 router-link 后，vueRouter 會自動添加 .router-link-active 這個類，那么我們可以利用這個類添加屬性，改變顏色。

3.動態路由

3.1靜態部分

之前定義的兩個路由，都是定義好的，是嚴格匹配的，只有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣，才能顯示相應的組件。
但有時現實卻不是這樣的，當我們去訪問網站並登錄成功后，它會顯示

歡迎你，+ 你的名字。

不同的用戶登錄， 只是顯示“你的名字” 部分不同，其它部分是一樣的。這就表示user組件，不同的用戶（就是用戶的id不同），它都會導航到同一個user 組件中。這樣我們在配置路由的時候，就不能寫死, 就是路由中的path屬性，不能寫死，那要怎么設置?

都是導航到 user 組件，路徑中肯定有user，只是用戶的id 不同，那就給路徑划分一個動態部分來匹配不同的id. 。在vue-router中，動態部分 以: 開頭，那么路徑就變成了/user/:id, 這條路由就可以這么寫： { path:"/user/:id", component: user }

1.定義一個user組件

<template>
    <div>
        <h1>User</h1>
        <div>我是user組件</div>
    </div>
</template>
<script>
    export default {
    }
</script>

2.頁面中再添加兩個router-link 用於導航

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
      <!-- router-link 定義點擊后導航到哪個路徑下 -->
      <router-link to="/home">Home</router-link>
      &nbsp;&nbsp;&nbsp;
      <router-link to="/about">About</router-link>
      <hr>
      <!--  增加兩個到user組件的導航，可以看到這里使用了不同的to屬性 -->
      <router-link to="/user/123">User123</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/user/456">User456</router-link>
    </header>
    <!-- 對應的組件內容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>
<style>
  .router-link-active {
    color: red;
  }
</style>
 
<script>
export default {
  
}
</script>

3.最后router.js中添加路由配置

import { createRouter, createWebHistory } from 'vue-router'
// import VueRouter from "vue-router";
// import Vue from "vue";
import home from '../components/home.vue';
import about from '../components/about.vue';
import user from '../components/user.vue';

// Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/about',
    component: about
  },
  // 重定向
  {
    path: '/', 
    redirect: '/home' 
  },
  /*新增user路徑，配置了動態的id*/
  {
    path: "/user/:id",
    component: user
},
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router;

點擊User13或者User456都是導航至user組件。

3.2獲取動態部分

組件中要顯示不同部分的內容，也就是“你的名字”。

當整個vue-router 注入到根實例后，在組件的內部，可以通過this.$route 來獲取到 router 實例。它有一個params 屬性，就是來獲得這個動態部分的。
它是一個對象，屬性名就是路徑中定義的動態部分 id, 屬性值就是router-link中to屬性中的動態部分，如123。
使用vuex時，組件中想要獲取到state 中的狀態，使用computed屬性，在這里也是一樣，在組件中，定義一個computed 屬性dynamicSegment

1.user 組件

<template>
    <div>
        <h1>User</h1>
        <div>我是user組件, 動態部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

這里存在一個問題，就是動態路由在來回切換時，它們指向同一組件，user，vue不會銷毀再創建這個組件，而是復用這個組件。

當第一次點擊（如：user123）的時候，vue 把對應的組件渲染出來，但在user123, user456點擊來回切換的時候，這個組件就不會發生變化了。

這時如果想要在組件來回切換的時候做點事情，那么只能在組件內部（user.vue中）利用watch 來監聽$route的變化。

user.vue組件

<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那個組件，from 表示的是你從哪個組件過來的，它們是兩個對象，你可以把它打印出來，它們也有一個param 屬性
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

4.嵌套路由

嵌套路由，主要是由我們的頁面結構所決定的。當我們進入到home頁面的時候，home頁面下面還有分類，如手機系列，平板系列，電腦系列。當我們點擊各個分類的時候，它需要路由到各個部分。如點擊手機，它肯定到對應到手機的部分。

1.home.vue 組件

<template>
  <div>
    <h1>home</h1>
    <!-- <p>{{msg}}</p> -->
    <p>
      <router-link to="/home/phone">手機</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/home/tablet">平板</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/home/computer">電腦</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>
<script>
// export default {
//     data () {
//         return {
//             msg: "我是home 組件"
//         }
//     }
// }
</script>

2.router.js(不要忘記import引入)

const routes = [
  {
    path: '/home',
    component: home,
    children: [
      {
        path: "phone",
        component: phone
      },
      {
        path: "tablet",
        component: tablet
      },
      {
        path: "computer",
        component: computer
      },
      // 當進入到home時，顯示下面的組件
      {
        path: "",
        component: phone
      }
    ]
  },
  {
    path: '/about',
    component: about
  },
  // 重定向
  {
    path: '/',
    redirect: '/home'
  },
  /*新增user路徑，配置了動態的id*/
  {
    path: "/user/:id",
    component: user
  },
]

3.新建三個組件，例如：computer.vue

<template>
    <div>
        <h1>computer</h1>
        <p>{{computerMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                computerMsg: '我是home組件下的computer組件'
            }
        }
    }
</script>

5.命名路由

命名路由，很簡單，看名字就知道，這個路由有一個名字，也就是路由有一個name屬性。

1.給user路由添加name屬性

{undefined
path: “/user/:id”,
name: “user”,
component: user
}

2.命名路由的使用

<router-link to="/user/123">User123</router-link>
// 和下面等價
<router-link :to="{ name: 'user', params: { id: 123 }}">User123</router-link>
// 當使用對象作為路由的時候，to前面要加一個冒號,表示綁定

編程式導航：這主要應用到按鈕點擊上。當點擊按鈕的時候，跳轉另一個組件, 這只能用代碼，調用rourter.push() 方法。 當們把router 注入到根實例中后，組件中通過 this.$router 可以獲取到router, 所以在組件中使用。

this.$router.push(’{name:“home”}’), 就可以跳轉到home界面
————————————————
版權聲明：本文為CSDN博主「貓與故巷0214」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_44827845/article/details/119824317