vue-router四版本-适用vue3

Vue Router的介绍

简介

前端路由是现代SPA应用必备的功能，每个现代前端框架都有对应的实现，例如vue-router、react-router。

Vue Router是Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，使用 Vue.js + Vue Router 让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

官网

Vue3.x对应vue-router的v4.x版本

v4版本的官网：https://router.vuejs.org/zh/

安装

在浏览器中直接使用，需要使用script标签导入vue-router.js：

<script src="https://unpkg.com/vue-router@4.X.X"></script>

在脚手架中使用：

npm install vue-router@4.X.X

Vue Router的使用步骤

在浏览器中的使用

第一步：安装vue-router

<script src="https://unpkg.com/vue-router@4"></script>

第二步：添加路由导航链接及路由出口

在Vue根组件的模板中添加添加路由导航链接及路由出口

• 路由导航链接：点击不同的导航链接，导航到匹配的组件
• 路由出口：导航链接匹配的组件渲染的位置

<div id="app">
  <nav id="nav-list">
    <div class="w">
      <!-- 路由导航链接 -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">首页</router-link>
      <router-link to="/friend">好友</router-link>
      <router-link to="/setting">设置</router-link>
    </div>
  </nav>

  <div class="w">
    <!-- 路由出口 -->
  	<!-- 路由匹配到的组件将渲染在这里 -->
    <router-view id="view"></router-view>
  </div>
</div>

第三步：定义路由组件

这一步就是创建vue组件，等配置好路由之后，随后将组件映射到路由。

• 路由组件不需要使用app.component() 或者 components 注册，直接使用组件配置对象创建。
• 当路由路径匹配的时候，会在路由出口自动渲染路由组件
• 路由组件默认没有名字，可以通过name选项给组件起名字，方便调试

const home = {
   
   
  name: 'Home',
  template: '<h1>首页</h1>',
}
const friend = {
   
   
  name: 'Friend',
  template: '<h1>好友</h1>',
}
const setting = {
   
   
  name: 'Setting',
  template: '<h1>设置</h1>',
}

第四步：配置路由规则

这一步主要是创建路由管理器对象 router，并配置路由列表（路由表）routes。

先创建路由对象route，把每一个路由对象存入数组 routes 中，在路由对象中配置路由规则：

• path：定义路由url地址，一个url路径对应一个组件
• component：定义路由url地址映射的Vue组件

const routes = [
  {
   
    path: '/', component: home },
  {
   
    path: '/friend', component: friend },
  {
   
    path: '/setting', component: setting },
];

再创建路由管理器对象router，创建路由管理器对象的时候，需要传入上面定义的路由规则对象routes：

const {
   
    createRouter, createWebHashHistory } = VueRouter;

const router = createRouter({
   
   
  history: createWebHashHistory(),
  routes, // (缩写) 相当于 routes: routes
});

也可以把上面两步合并在一起：

const router = createRouter({
   
   
  routes: [
    {
   
    path: '/', component: home },
    {
   
    path: '/friend', component: friend },
    {
   
    path: '/setting', component: setting },
  ]
});

第五步：注入路由

在根组件实例中通过 router 配置参数注入路由，从而让整个应用都有路由功能：

const {
   
    createApp } = Vue;

const app = createApp({
   
   });

app.use(router); // 注入路由

app.mount('#app');

在脚手架中的使用

vue脚手架项目目录分析：

• public是静态资源文件夹。

• src是项目源代码文件夹，整个项目的所有代码都再src中。在src文件夹中，main.js是整个项目的入口文件。当运行项目时，vue-cli会使用webpack对main.js进行打包。

  • main.js 入口文件

  • App.vue 根组件下的app组件，后面所有的组件是添加在app组件内

  • components 目录 存放一般组件

  • views/pages 目录 存放路由组件

  • router目录 存放路由的配置文件index.js

  • store目录 存放vuex的配置文件

  • assets目录 存放静态资源

一般组件和路由组件都是vue的单文件组件，创建方式是一样的。

• 一般组件：可以导入到任意组件中使用，导入之后一定要在当前组件内的components属性中注册组件
• 路由组件：路由组件用在路由配置文件文件中

第一步：安装vue-router

npm install vue-router@4

第二步：配置路由规则

在项目src目录中创建router文件夹，在文件中创建index.js文件，在index.js文件中配置路由

// router/index.js

import {
   
    createRouter, createWebHistory } from 'vue-router';

import home from '../views/home.vue';
import friend from '../views/friend.vue';
import setting from '../views/setting.vue';

// 创建路由管理器对象，并配置路由表
const router = createRouter({
   
   
	history: createWebHistory(),
  routes: [
    {
   
    path: '/', component: home},
    {
   
    path: '/friend', component: friend},
    {
   
    path: '/setting', component: setting},
  ]