如何在Vue.js中使用路由

如何在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
    JavaScript
    • 步骤3: 创建项目后,我们将使用以下命令添加Vue路由器。
    vue add router
    JavaScript

    项目结构: 它将如下所示。
    如何在Vue.js中使用路由

    示例:

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

    index.vue

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

    about.vue

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

    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
    JavaScript

    现在让我们在我们的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>
    JavaScript

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

    Profile.vue

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

    运行应用程序的步骤:

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

    npm run serve
    JavaScript

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

    如何在Vue.js中使用路由

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册