学习Vue-router的使用
创建vue-cli的项目
项目构建成功之后通过运行指令使用项目
在views下创建test.vue页面添加到App.vue通过router的语法
然后通过router文件夹下的index.js配置路由然后在也面点击跳转到路由test页面
要求通过该实验的练习，学习并会使用Vue-router的基本语法，以及路由跳转和路由嵌套
具体操作步骤：
1)通过Vue-cli构建创建项目
2)通过指令运行Vue-cli脚手架
3)创建test.vue的页面
4)配置路由设置在主页面进行跳转看是否跳转成功
vue-router是 Vue.js 官方的路由管理器，用于实现单页面应用（SPA）的路由功能。下面为你介绍它的基本使用步骤。
1.项目初始化
如果使用 Vue 3，可在项目根目录下执行以下命令来安装 vue-router：
npm install vue-router@4# 创建项目（选择自定义，选择vue3+router）
vue create lx-vue-router
#进入项目目录
cd lx-vue-router#运行项目
npm run serve
访问链接http://localhost:8087/
#验证是否安装router
npm list vue-router
2.局部配置测试(如果选择了eslient)
自动修复 ESLint 错误
ESLint 提供了一个 --fix 选项，可以自动修复大部分格式问题。运行以下命令：
npx eslint --fix src/会自动修复所有可以修复的 ESLint 错误。
自动修复 Prettier 错误
Prettier 也可以自动格式化代码。运行以下命令：
npx prettier --write src/3.页面测试(创建了Home.vue与Test.vue)
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/test',
name: 'Test',
component: Test,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;//views/Home.vue
<template>
<div>
<h1>This is the Home Page</h1>
<p>Welcome to the Home page!</p>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>//views/Test.vue
<template>
<div>
<h1>This is the Test Page</h1>
<p>Welcome to the Test page!</p>
</div>
</template>
<script>
export default {
name: 'Test',
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>//app.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/test">Test</router-link>
</nav>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router) // 使用 Vue 3 的插件注册方式
.mount('#app') 
发现可以通过路由实现正确跳转，测试成功，接下来开始配置项目。