Vue Router

梦晨黑

于 2024-08-19 18:23:47 发布

阅读量107

点赞数 4

分类专栏： Vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/2302_80695016/article/details/141328841

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.下载VueRouter模块

yarn add vue-router@3.6.5

2.引入

import VueRouter from 'vue-router'

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter()

5.注入，将路由对象注入到new Vue实例中，建立关联

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

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

在main.js可以配置多个，使用routes

routes: [
    { path: '路径', component: 组件 },
    { path: '路径', component: 组件 },
    { path: '路径', component: 组件 },
  ]

7.配置路由出口

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/组件名"></a>
      <a href="#/组件名"></a>
      <a href="#/组件名"></a>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

页面组件放置在views文件夹

复用组件放置在components文件夹