通过vue快速搭建，运用路由来进行页面间的切换

最新推荐文章于 2024-04-25 17:01:32 发布

前端小臻

最新推荐文章于 2024-04-25 17:01:32 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/wangzhen12138/article/details/119250222

版权

Vue Router 组件调用路径配置 pageone pagetwo

关键词由CSDN通过智能技术生成

首先在我们学习路由的基础上肯定要有这会组件之间的调用，

那么在我们学习路由之前我们需要安装一下我们的router

我们可以打开我们的vscode来执行vue add router语句来进行安装

安装之后我们会发现到一个router的文件里面有一个index.js的文件

ue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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 ( '../views/About.vue')
  },

里面会有home和about 的示范其中我们需要定义我们的变量path，name，还有我们的component也就是我们的组件位置

这是我们可以模仿原生的示范来写pageone和pagetwo

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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 ( '../views/About.vue')
  },
  {
    path: '/pageone',
    name: 'PageOne',
    component: () =>  import('../views/pageOne.vue')
  },
  {
    path: '/pagetwo',
    name: 'PageTwo',
    component: () =>   import('../views/pageTwo.vue'),
   }
]

这样我们的路由变量定义好了

下面编写我们的page代码段

<template>
    <div>
        <h1> 页面一</h1>
        
    </div>
</template>

最后在我们的App.vue代码中添加为如下代码

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/pageone">页面一</router-link> |
      <router-link to="/pagetwo">页面二</router-link>
    </div>
    <router-view/>
  </div>
</template>

最后的结果如下