如何在 Vue.js 中使用路由？

Vue 路由器： Vue 路由器有助于浏览器的 URL/历史记录和 Vue 的组件之间的链接，允许某些路径呈现与其关联的任何视图。 vue 路由器用于构建单页应用程序 (SPA)。

创建新项目时可以默认设置 vue-router。在本文中，我们将单独安装它。所以我们可以看到它是如何工作的。

项目设置和模块安装：

• 第 1 步： Vue Router 可以通过 Npm 使用以下命令安装名为 vue-router 的包。

  npm install vue-router // OR 
  vue add router 

  它可以通过脚本标签使用，如下所示。

• 第 2 步：使用以下命令创建我们的 Vue 项目。

  vue create router-page 

• 第 3 步：创建项目后，我们将使用以下命令添加 Vue 路由器。

  vue add router

项目结构：它看起来像这样。

例子：

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')

index.js

// Requiring module
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
  
Vue.use(VueRouter)
  
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    //  Added our new route file named profile.vue
    {
        path: '/profile',
        name: 'Profile',
        Component: Profile
  
    },
    {
        path: '/about',
        name: 'About',
        // The route level code-splitting
        // this generates a separate chunk 
        // (about.[hash].js) for this route
        // which is lazy-loaded when the
        // route is visited.
        component:()=> import(
            /* webpackChunkName: "about" */ 
            '../views/About.vue'
        )
    },
]
  
// Create Vue Router Object
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
  
export default router

现在让我们在App.vue和index.js文件中添加到该应用程序的新路由。在我们添加新路由之前，我们需要在我们的视图文件夹中创建名为Profile.vue的新组件。

可用于显示基于路由的路由组件。当应用于模板中的元素时，使该元素成为启动导航到路线的链接。导航在页面上的一个或多个 位置打开一个或多个路由组件。这意味着当我们路由到另一个视图时，应用程序只是隐藏一些信息并显示请求的信息。

运行应用程序的步骤：使用以下命令运行服务器。

npm run serve

输出：打开浏览器并转到http://localhost:8080/ ，您将看到以下输出。