vue路由vue-router

1.什么上路由。

路由的本质是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

2.为什么用vue-router。

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

3.怎么安装。

通过npm安装

npm install vue-router@4

通过yarn安装

yarn add vue-router@4

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

如果你有一个正在使用 Vue CLI (opens new window)的项目，你可以以项目插件的形式添加 Vue Router。

vue add router

4.路由小案列。

首先新建项目，在项目中安装vue-router，并且通过 Vue.use() 明确地安装路由。

创建页面page1,在src/views/page1.vue

<template>
  <div class="page">
    page1
  </div>
</template>

创建页面page2,在src/views/page2.vue

<template>
  <div class="page2">
    page2
  </div>
</template>

在src下创建router文件夹并且在里面创建index.js文件。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/page2',
    name: 'about',
    component: () => import('../views/PageView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在app.vue中使用router-link。

<template>
  <nav>
    <router-link to="/">page1</router-link> |
    <router-link to="/page2">page2</router-link>
  </nav>
  <router-view/>
</template>

最终成果。