Vue Router 搭建

安装Vue Router路由

首先将 Vue Router 安装到刚刚创建的 Vue3 项目中。

npm i vue-router@4

创建页面组件

没有把页面直接放在组件component 里面

• 在src下新建views 文件夹
• 在views 下面创建HomeView.vue和AboutView.vue
• 在两个文件里面添加一些内容

HomeView.vue 中:

<template>
  <div>
    这是点开的首页噢
  </div>
</template>

AboutView.vue 中

<template>
  <div>
    这是about页面喔
  </div>
</template>

配置并建立vue router路由

• 首先要添加配置文件:在src 下新建router 文件夹

• 在router 下配置文件index.js

• import { createRouter, createWebHashHistory } from 'vue-router'
  import HomeView from '../views/HomeView.vue'
  
  const routes = [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      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(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
   
  ]
  
  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })
  
  export default router
  
    
  
    在这个配置文件中,我们使用一个数组来写router指向的每一个分页面
  
    + `path` 是路由分配的url
    + `name` 是路由指向这个页面的时候显示的名字
    + `component` 是路由调用这个页面时加载的组件名
    + 这段代码的最后是router的主体,我们创建了一个路由,使用`histor` 模式
  
    <p class="note note-info">`history` 模式是 `hash` 模式的升级版，主要区别在浏览器链接的显示的不同</p>
  
    - hash 模式：把前端路由路径用 # 号拼接在真实 URL 后面的模式。当 # 后面的路径发生变化时，浏览器不会重新发起请求，而是出发 hashchange 事件。hash 模式链接样式：`http://localhost:8080/#/home`
  
    - history 模式：history API 是 HTML5 的新特性，允许开发者直接更改前端路由。history 模式链接样式：`http://localhost:8080/home`
  
      
  
  ## 在main.js中引入router
  
  ```javascript
  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  
  createApp(App).use(router).mount('#app')
  
  

在 App.vue 中使用<router-view>和<router-link>

App.vue 是项目的主组件，可以理解为项目的入口页面，所有页面都在 App.vue 页之下进行切换。接下来我们要来修改 App.vue ，以适应我们添加的 Router 功能。

文件位置：/src/App.vue

<template>
  <div id="nav">
      <router-link to="/"> 首页 </router-link> |
      <router-link to="/about"> 关于 </router-link>
  </div>
  <router-view />
</template>

最后再npm run serve康康吧