在现代前端开发中，Vue.js 是一个非常流行的 JavaScript 框架，而 Vue Router 是 Vue.js 官方推荐的路由管理器。通过 Vue Router，我们可以轻松地构建单页面应用（SPA），并实现页面之间的无缝切换。本文将详细介绍如何使用 Vue 和 Vue Router 构建一个列表页，涵盖从项目初始化到页面路由配置的完整流程。
在开始之前，我们需要确保已经安装了 Node.js 和 npm（Node.js 的包管理器）。接下来，我们可以使用 Vue CLI 来快速初始化一个 Vue 项目。
如果你还没有安装 Vue CLI，可以通过以下命令进行安装：
npm install -g @vue/cli
使用 Vue CLI 创建一个新的 Vue 项目：
计算
安全
数据库
网络和加速
企业服务
vue create list-page-demo
在创建过程中，Vue CLI 会提示你选择一些配置选项。你可以选择默认配置，也可以手动选择需要的特性。为了简化流程，我们选择默认配置。
项目创建完成后，进入项目目录：
cd list-page-demo
在项目目录下，运行以下命令启动开发服务器：
npm run serve
此时，你可以在浏览器中访问 http://localhost:8080，看到 Vue 的欢迎页面。
Vue Router 是 Vue.js 的官方路由管理器，我们需要将其安装到项目中。
在项目目录下，运行以下命令安装 Vue Router：
npm install vue-router
安装完成后，我们需要在项目中配置 Vue Router。首先，在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件：
mkdir src/router
touch src/router/index.js
在 src/router/index.js 文件中，编写以下代码：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
// 路由配置将在这里添加
];
const router = new VueRouter({
mode: 'history',
routes,
});
export default router;
接下来，我们需要在 src/main.js 中引入并使用 Vue Router：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
在构建列表页之前，我们需要创建一个用于显示列表的组件。假设我们要显示一个简单的任务列表。
在 src/components 目录下创建一个 TaskList.vue 文件：
touch src/components/TaskList.vue
在 TaskList.vue 文件中，编写以下代码：
<template>
<div>
<h1>任务列表</h1>
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [
{ id: 1, title: '任务 1' },
{ id: 2, title: '任务 2' },
{ id: 3, title: '任务 3' },
],
};
},
};
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
</style>
接下来，我们需要在 src/router/index.js 中配置路由，使得访问 /tasks 路径时显示 TaskList 组件。
在 src/router/index.js 文件中，修改 routes 数组：
import TaskList from '@/components/TaskList.vue';
const routes = [
{
path: '/tasks',
name: 'TaskList',
component: TaskList,
},
];
为了能够在页面之间导航，我们可以在 src/App.vue 中添加一个导航链接：
<template>
<div id="app">
<nav>
<router-link to="/tasks">任务列表</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
nav {
margin-bottom: 20px;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #42b983;
}
</style>
现在，你可以启动开发服务器并访问 http://localhost:8080/tasks，看到任务列表页面。
在实际应用中，列表页通常需要与详情页配合使用。我们可以通过动态路由来实现这一功能。
在 src/components 目录下创建一个 TaskDetail.vue 文件：
touch src/components/TaskDetail.vue
在 TaskDetail.vue 文件中，编写以下代码：
<template>
<div>
<h1>任务详情</h1>
<p>任务 ID: {{ task.id }}</p>
<p>任务标题: {{ task.title }}</p>
</div>
</template>
<script>
export default {
data() {
return {
task: {},
};
},
created() {
const taskId = this.$route.params.id;
this.task = this.getTaskById(taskId);
},
methods: {
getTaskById(id) {
const tasks = [
{ id: 1, title: '任务 1' },
{ id: 2, title: '任务 2' },
{ id: 3, title: '任务 3' },
];
return tasks.find(task => task.id === parseInt(id));
},
},
};
</script>
<style scoped>
p {
margin: 10px 0;
}
</style>
在 src/router/index.js 中，添加一个动态路由：
import TaskDetail from '@/components/TaskDetail.vue';
const routes = [
{
path: '/tasks',
name: 'TaskList',
component: TaskList,
},
{
path: '/tasks/:id',
name: 'TaskDetail',
component: TaskDetail,
},
];
在 TaskList.vue 中，修改 li 元素，添加一个指向详情页的链接：
<template>
<div>
<h1>任务列表</h1>
<ul>
<li v-for="task in tasks" :key="task.id">
<router-link :to="`/tasks/${task.id}`">{{ task.title }}</router-link>
</li>
</ul>
</div>
</template>
现在，你可以访问 http://localhost:8080/tasks，点击任务标题，跳转到对应的任务详情页。
在某些情况下，我们可能需要对路由进行权限控制，例如只有登录用户才能访问某些页面。Vue Router 提供了路由守卫功能，可以帮助我们实现这一需求。
在 src/components 目录下创建一个 Login.vue 文件：
touch src/components/Login.vue
在 Login.vue 文件中，编写以下代码：
<template>
<div>
<h1>登录</h1>
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
methods: {
login() {
localStorage.setItem('isAuthenticated', 'true');
this.$router.push('/tasks');
},
},
};
</script>
<style scoped>
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
在 src/router/index.js 中，添加登录路由：
import Login from '@/components/Login.vue';
const routes = [
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/tasks',
name: 'TaskList',
component: TaskList,
meta: { requiresAuth: true },
},
{
path: '/tasks/:id',
name: 'TaskDetail',
component: TaskDetail,
meta: { requiresAuth: true },
},
];
在 src/router/index.js 中，添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true';
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login');
} else {
next();
}
});
现在，你可以访问 http://localhost:8080/tasks，如果未登录，将会被重定向到登录页面。登录后，才能访问任务列表和详情页。
通过本文的介绍，我们学习了如何使用 Vue 和 Vue Router 构建一个简单的列表页。我们从项目初始化开始，逐步介绍了 Vue Router 的安装与配置、列表页与详情页的创建、动态路由的使用以及路由守卫的实现。通过这些步骤，你可以轻松地构建一个功能完善的单页面应用。
Vue Router 提供了丰富的功能，能够满足大多数前端路由需求。在实际开发中，你可以根据项目需求进一步扩展和优化路由配置，例如使用嵌套路由、懒加载等技术，以提升应用的性能和用户体验。
希望本文对你有所帮助，祝你在 Vue.js 的开发之旅中取得成功！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
