使用VueRouter实现多页面应用的路由跳转

VueRouter简介

        Vue Router是Vue.js官方的路由管理器，用于构建单页面应用。它可以实现嵌套路由、动态路由选择、模块化路由配置等功能，并提供导航控制、HTML5历史模式、URL编码等特性。

VueRouter的导入步骤

1.在当前工程下载VueRouter模块

Vue2对应版本与Vue3对应版本不同，Vue3对应VueRouter4版本

yarn add vue-router@3.6.5

 2.引入VueRouter

新建一个router文件夹存放router的js代码

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)//插件初始化

//导出
export default router

3.创建路由对象

在该js文件中创建路由对象

const router = new VueRouter({
})

4.注入

在main.js中注入到new Vue中

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

当出现代表VueRouter注入成功。

使用步骤

        1.创建需要的多组件，配置路由的规则

            创建一个View文件夹存放多组件，并在Router文件夹下的js文件配置。

{ path：‘地址栏路径’ ， component：组件}

import VueRouter from 'vue-router';
import Vue from 'vue';
import FindMusic from '@/views/FindMusic'
import MyMusic from '@/views/MyMusic'
import FriendMusic from '@/views/FriendMusic'
Vue.use(VueRouter)//插件初始化

const router = new VueRouter({
    mode:'history',
  routes:[
    { path:'/FindMusic',component:FindMusic},
    { path:'/MyMusic',component:MyMusic},
    { path:'/FriendMusic',component:FriendMusic},
  ],
  linkActiveClass:'active',
  linkExactActiveClass:'exact-active'
})//使用router

//导出
export default router

2.配置导航以及路由出口

App.vue中配置：

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/FindMusic">发现音乐</router-link>
      <router-link to="/MyMusic">我的音乐</router-link>
      <router-link to="/FriendMusic">朋友喜欢</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

router-view用于控制组件所展示的位置。

配置完成后便可以使用VueRouter实现多页面应用的路由跳转。