Java学习笔记之：Vue中路由的基本使用

一、安装 Vue Router

1. 使用 npm 安装：
   • 在项目根目录下运行命令npm install vue-router@4 --save。

二、创建路由配置文件

1. 首先创建3个vue文件，分别命名为：one.vue，two.vue，ElpView.vue，要实现的效果：在Vue.vue中使用ElpView组件然后在ElpView.vue使用one，two组件，最后在浏览器显示one，two，点击one跳转到one.vue，点击two跳转到two.vue。one.vue和two.vue文件里面内容分别如下：

   one.vue:

   <template><p>这是one</p>
   </template>
   

   tow.vue:

   <template><p>这是two</p>
   </template>
   

2. 创建一个router.js文件，在里面配置相关内容：

   import { createRouter, createWebHistory } from 'vue-router'import One from '@/components/one.vue'
   import Two from '@/components/two.vue'
   import ElpView from '@/components/ElpView.vue'const routes = [{path: '/one',name: 'wo',component: One},{path: '/two',name: 'ai',component: Two},{path: '/',name: 'ni',component: ElpView}
   ]const router = createRouter({history: createWebHistory(),routes
   })export default router

3. 在ElpView.vue中使用router-link标签配置：

   <template><div><router-link to="/one">one</router-link><br><router-link to="/two">two</router-link></div>
   </template><script>
   import one from './one.vue';
   import two from './two.vue';
   export default{components:{one,two,}
   }
   </script>
   <style></style>
   

4. 在根组件Vue.vue下使用router-view标签配置：

   <template><router-link to='/elpview'></router-link>
   <router-view></router-view></template><script lang="js" >
   import ElpView from './components/ElpView.vue';
   import one from './components/one.vue';
   import two from './components/two.vue';
   export default {components: {ElpView ,one,two}
   }
   </script>
   

通过以上配置，就可以实现在vue工程中，点击不同的按钮跳转到不同的页面。