如何在Vue.js中使用路由

Vue路由器: Vue Router有助于链接浏览器的URL /历史记录和Vue组件，允许特定路径呈现与之关联的任何视图。 Vue路由器用于构建单页应用程序（SPA）。

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

项目设置和模块安装：

• 步骤1： 可以使用以下命令通过Npm安装Vue路由器，软件包名称为vue-router。

  “`javascript npm install vue-router //或者
  vue add router
  </li>
  </ul>

  <pre><code class="line-numbers">可以通过以下方式使用它。
  “`javascript
  <script src =“https://unpkg.com/vue-router”></ script>
  

  • 步骤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.vue

  <template> 
    <div class="home"> 
      <img alt="Vue logo" src="../assets/logo.png"> 
      <HelloWorld msg="Welcome to Your Vue.js App"/> 
    </div> 
  </template>
  

  about.vue

  <template> 
    <div class="about"> 
      <h1>This is an about page</h1> 
    </div> 
  </template>
  

  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文件中添加我们的新路由。在添加新路由之前，我们需要在views文件夹中创建一个名为Profile.vue的新组件。

  App.vue

  <template> 
    <div id="app"> 
      <div id="nav"> 
        <router-link to="/">Home</router-link> | 
        <router-link to="/about">About</router-link> | 
        added a new route to our app.vue file// 
         <router-link to="/profile">Profile</router-link> 
      </div> 
      <router-view/> 
    </div> 
  </template>
  

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

  Profile.vue

  <template> 
    <div class="profile"> 
      <h1>This is a profile page</h1> 
    </div> 
  </template>
  

  运行应用程序的步骤:

  使用以下命令运行服务器。

  npm run serve
  

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