这是我参与「第四届青训营」笔记创作活动的第3天。

前言

Vue路由是用来管理页面切换或跳转的一种方式。Vue十分适合用来创建单页面应用。单页面只有一个主应用入口，通过组件的切换来渲染不同的功能页面。而Vue提供了配套的路由管理方案——Vue Router，让我们可以更加自然的进行功能页面的管理。

什么是Vue Router

Vue Router是Vue官方的路由管理器，与Vue框架本身深度契合。Vue Router主要包含如下功能：

路由支持嵌套
可以模块化的进行路由配置
支持路由参数、查询和通配符
提供了视图过渡效果
能够精准的进行导航控制

安装

和Vue框架本身一样，Vue Router既支持使用CDN的方式引入，也支持使用NPM的方式进行安装。这里我们使用第二种。

使用Vue CLI创建一个示例的Vue项目工程，进入项目根目录，在终端执行：

npm install vue-router@4 -s

稍等一会，安装完成后在项目的package.json文件会自动添加Vue Router的依赖：

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.1.3"
},

安装完成后，就可以尝试对Vue Router进行简单的使用了。

一个简单的例子

通常的使用方式为：将定义好的Vue组件绑定到指定的路由，然后通过路由指定在何时或者何处渲染它。

首先，在components文件夹下新建两个文件，分别命名为DemoFirst.vue和DemoSecond.vue，写入如下代码：

DemoFirst.vue

<template>
    <h1>
        示例页面1
    </h1>
</template>

<script>
    export default{

    };
</script>

DemoSecond.vue

<template>
    <h1>
        示例页面2
    </h1>
</template>

<script>
    export default{

    };
</script>

修改App.vue，使用上述两个组件：

<template>
  <h1>HelloWorld</h1>
  <p>
    <router-link to="/demo1">页面1</router-link>
    <br/>
    <router-link to="/demo2">页面2</router-link>
  </p>
  <router-view></router-view>
</template>

<script>
  export default {
    name: 'App',
    components: {
      
    }
  }
</script>

其中，router-link是一个自定义的链接组件；router-view用来渲染与当前URL对应的组件，我们可以将其放在任何位置。

修改项目中的main.js文件，在其中进行路由的定义与注册：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import DemoFirst from './components/DemoFirst.vue'
import DemoSecond from './components/DemoSecond.vue'
import UserProfile from './components/UserProfile.vue'

const app = createApp(App)
const routes = [
    { path: '/demo1', component: DemoFirst },
    { path: '/demo2', component: DemoSecond },
    { path: '/user/:username/:id', component: UserProfile }
]
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})
app.use(router)
app.mount('#app')

运行项目，单击页面中的两个按钮，就可以切换对应的组件啦~

Vue路由管理 ｜ 青训营笔记

前言

什么是Vue Router

安装

一个简单的例子

Vue路由管理｜青训营笔记