Vue-路由-配置

盖盖衍上2024-01-16 20:48

1. VueRouter 的使用 (5 + 2)

5个基础步骤 (固定)

下载 VueRouter 模块到当前工程，这里指定版本：3.6.5

js 复制代码

yarn add vue-router@3.6.5

引入 vue-router

js 复制代码

import VueRouter from 'vue-router'

安装注册

js 复制代码

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

创建路由对象

js 复制代码

// 两种方式: 二选一

// 创建了一个路由对象(不包含路由信息)
const router = new VueRouter()

// 创建了一个路由对象(包含路由信息)
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'searchcc', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

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

js 复制代码

new Vue({
  render: h => h(App),
  router // 这里是简写；全写为：router: router
}).$mount('#app')

2 个核心步骤

创建需要的组件 (views目录)，配置路由规则

js 复制代码

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'searchcc', path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

配置导航，配置路由出口(路径匹配的组件显示的位置)

js 复制代码

<template>
  <div>
    <div class="footer_wrap">
      <!-- 配置导航，配置路由出口 -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

2. 组件存放目录问题

组件分类：

页面组件
复用组价

存放原则：分类开来更易维护

组件	存放位置	理由
页面组件	src/views文件夹	页面组件 - 页面展示 - 配合路由用
复用组件	src/components文件夹	复用组件 - 展示数据 - 常用于复用

Vue-路由-配置

1. VueRouter 的 使用 (5 + 2)

5个基础步骤 (固定)

2 个核心步骤

2. 组件存放目录问题

1. VueRouter 的使用 (5 + 2)