Vue3-路由

设置一个NavBar导航栏

先设计几个页面

要注意这几个页面export暴露出去的名字是驼峰命名的格式

根据这几个页面，设计一个导航栏

<template>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container">
         <router-link class="navbar-brand" :to="{name: 'home'}">NavBar</router-link>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
                 <router-link class="nav-link" :to="{name: 'home'}">首页</router-link>
                 <router-link class="nav-link" :to="{name: 'userlist'}">好友列表</router-link>
                 <router-link class="nav-link" :to="{name: 'myself'}">个人主页</router-link>
             </div>
         </div>
     </div>
 </nav>
</template>

<script>
export default {
 name: "NavBar",
}
</script>

<style scoped>
</style>

上面的代码，需要注意 router-link

router-link 的 to 属性 可以传一个字典

• 其中 name 的命名需要和 router/index.js 中的 name 相同
• 还有一个 params 可以传一些参数

router/index.js 中内容

import HomeView from '../views/HomeView.vue'
import UserList from '../views/UserlistView.vue'
import MySelf from '../views/MyselfView.vue'

const routes = [{
  path: '/',
  name: 'home',
  component: HomeView,
}, {
  path: '/userlist/',
  name: 'userlist',
  component: UserList,
}, {
  path: '/myself/',
  name: 'myself',
  component: MySelf,
}]

如何根据不同的 URL 显示不同的页面内容

在App.vue的template中，放入<router-view></router-view>，则可以根据导航栏，在App.vue中渲染不同的界面
同理，也可以在别的页面的template中放入router-view

<router-view></router-view>会把URL链接中的页面进行渲染
例如: http://localhost:8080/userlist/
会展示 在router/index.js中, 与/userlist/绑定的component:对应的UserList界面 

URL传递参数

首先在好友列表中创建几个好友 在 UserlistView.vue 中

<template>
<h1>好友列表</h1>
<div class="container">
  <div class="card" v-for="user in users" :key="user.id">
  <!-- 将每个好友卡片设置为一个router-link，方便点击后跳转，并且跳转时URL接收参数user.id -->
      <router-link 
          :to="{name: 'userprofile', params: {userId: user.id}}"
      >
          <div class="card-body">
              {{user.username}}
          </div>
      </router-link>
  </div>
</div>
</template>

<script>
export default {
name: "UserList",
setup: () => {
  let users = [
      {id: 1, username: 'A'},
      {id: 2, username: 'B'},
      {id: 3, username: 'C'},
  ];

  return {
      users: users,
  }
}
}
</script>

<style scoped>
.card {
margin-bottom: 15px;
cursor: pointer;
}
.card:hover {
box-shadow: 2px 2px 10px lightgray;
transition: 300ms;
}
</style>

简单创建一个展示个人用户的界面 UserProfileView.vue，点击好友列表的某个好友卡片后，会显示该个人用户的界面，并且该界面会接收URL的 参数，将参数显示在该界面

同时为这个 UserProfileView.vue 界面设置一个路由

注意：在 UserlistView.vue 中有一个 router-link，这个 router-link 的 to 给 name 为 userprofile 的 URL 传递了一个参数 {userId: user.id}

<router-link :to="{name: 'userprofile', params: {userId: user.id}}" />

由于 userId 是变量，所以在路由 router/index.js 中，对应的 URL 需要写成：（

🔺这里写代码的时候，应该是先在 router/index.js 的 path 中定义好，然后才在 router-link 的 to 属性上，添加对应的跳转URL）

{
// 这里是因为NavBar组件Link的url后面追加了不同用户的userId
// 所以需要在这里加上变量userId
path: '/userprofile/:userId/',
name: 'userprofile',
component: UserProfile,
}

结果展示：