【Vue】Vue Router 在 Vue2 项目中的简单使用案例

前言

Vue Router 是 Vue.js 官方的路由管理器。它可以帮助我们在 Vue2 项目中实现页面之间的切换和导航。以下是在 Vue2 项目中使用 Vue Router 的简单案例。

---

步骤

1. 安装 Vue Router

   首先，我们需要安装 vue-router 包。你可以使用 npm 或 yarn 安装，打开终端并执行以下命令：

   npm install vue-router
   

   或

   yarn add vue-router
   

2. 引入并注册 Vue Router

   在 main.js 文件中引入 vue-router 并注册。

   import Vue from 'vue'
   import App from './App.vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter);
   
   Vue.config.productionTip = false
   
   new Vue({
         
         
     render: h => h(App),
   }).$mount('#app')
   

3. 创建路由实例和定义路由规则

   接下来，我们需要创建一个新的路由实例，并定义路由规则。在你的项目根目录下创建一个新的文件，命名为 router.js（或者你可以自定义文件名）。在 router.js 文件中，你可以使用 routes 数组来定义你的路由规则。每个路由规则应包含一个路径和关联的组件。

   import VueRouter from "vue-router";
   import HomeView from "@/components/HomeView.vue";
   import NewsView from "@/components/NewsView.vue";
   import AboutView from "@/components/AboutView.vue";
   
   const routes = [
       {
         
         
           path: '/',
           redirect: HomeView
       },
       {
         
         
           path: '/home',
           component: HomeView
       },
       {
         
         
           path: '/news',
           component: NewsView
       },
       {
         
         
           path: '/about',
           component: AboutView
       },
   ];
   
   const router = new VueRouter({
         
         
       routes
   })
   
   export default router
   

4. 将路由实例绑定到 Vue 实例中

   然后，在 main.js 文件中引入路由实例，并将其绑定到 Vue 实例中。

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router.js'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter);
   
   Vue.config.productionTip = false
   
   new Vue({
         
         
     router,
     render: h => h(App),
   }).$mount('#app')
   

5. 修改 App.vue

   最后，我们需要修改 App.vue 文件，将路由链接和视图添加到模板中。

   <template>
     <div id="app">
       <h3>Vue.js Router</h3>
       <router-link to="/home">Home</router-link>
       |
       <router-link to="/news">News</router-link>
       |
       <router-link to="/about">About</router-link>
       <br/><br/>
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   </script>
   
   <style>
   </style>
   

   现在，我们可以在浏览器中查看效果了。