步骤 1: 安装 Vue CLI
首先,确保你的电脑上已经安装了Node.js和npm。然后,通过以下命令安装Vue CLI(如果已经安装,请跳过此步骤):
npm install -g @vue/cli
步骤 2: 创建新的Vue项目
使用Vue CLI创建一个新的Vue项目。在命令行中执行以下命令:
vue create vue-router-demo
这将创建一个名为vue-router-demo
的新目录,并安装Vue.js的基本项目结构和依赖项。
步骤 3: 安装 Vue Router
进入项目目录,并安装Vue Router:
cd vue-router-demo
npm install vue-router
步骤 4: 创建和配置路由
在项目的根目录(src
目录下)创建一个新文件夹router
,然后在其中创建一个名为index.js
的文件。在该文件中配置路由:
// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 定义路由
const routes = [
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
];
// 创建 Router 实例
const router = new VueRouter({
mode: 'history', // 可选:'hash' | 'history'
base: process.env.BASE_URL,
routes
});
export default router;
步骤 5: 创建视图组件
在src/views
目录下创建两个Vue组件文件:Home.vue
和About.vue
,并编写内容:
<!-- src/views/Home.vue -->
<template>
<div>
<h1>Home</h1>
<p>Welcome to the Home Page!</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<!-- src/views/About.vue -->
<template>
<div>
<h1>About</h1>
<p>This is an About Page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
步骤 6: 在主应用程序中使用路由
在src/main.js
中导入创建的路由,并将其挂载到Vue实例中:
// src/main.js
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');
步骤 7: 创建入口组件
创建入口组件App.vue
并定义主要的应用程序结构:
<template>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
步骤 8: 运行和测试
最后,在项目根目录下运行以下命令启动开发服务器,并在浏览器中查看效果:
npm run serve
这将启动一个开发服务器,你可以在浏览器中访问http://localhost:8080
查看你的Vue应用程序,点击导航链接测试路由切换。