VueRouter的基本使用

路由的基本使用

文章目录

  • 路由的基本使用
      • 01-VueRouter
          • VueRouter的使用 ( 5 + 2)
          • 综合代码
      • 拓展:组件存放问题

什么是路由呢?

在生活中的路由:设备和IP的映射关系

  • 在Vue中:路径 和 组件 的 映射 关系。

01-VueRouter

  1. 作用:修改地址栏路径时,切换显示匹配的组件。
  2. VueRouter是Vue官方的一个路由插件,是一个第三方包。

VueRouter的使用 ( 5 + 2)
  • 五个基础步骤

① 下载: 下载VueRouter 到当前工程,版本采用3或者4.

yarn add vue-touter@3.6.5

②引入

import VueRouter from 'vue-router'

③安装注册

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

④创建路由对象

const router = new VueRouter()

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

 router  //简写 键是固定的,值可以自己创建

VueRouter的基本使用_第1张图片

看到 #/ 就表示成功的注入了VueRouter


  • 2个核心步骤

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czBC18EO-1693238280996)(D:\桌面\images_md\Snipaste_2023-08-28_23-32-12.png)]

import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend'

const router = new VueRouter({
    toutes: [
    	{ path: '/find', component: Find}
        { path: '/my' ,component: My},
        { path: '/friend', component: Friend},
]
})

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

<div class="footer_wrap">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
</div>
<div class="top">
        <router-view></router-view>
</div>

综合代码
import Vue from 'vue'
import App from './App.vue'

// 路由的使用步骤:5 + 2
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联


// 2个核心步骤:
// 1. 创建组件,配路由规则
// 2. 配置导航,配置路由出口,同时设置路径匹配组件的显示位置


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

const router = new VueRouter({
  // 配置路由规则
  routes: [
    { path: '/find', component: Find},
    { path: '/my', component: My},
    { path: '/friend', component: Friend},
  ]
})

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router  //简写 键是固定的,值可以自己创建
}).$mount('#app')

  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口 → 路径匹配的组件所展示的区域 -->
        <router-view></router-view>
    </div>
  </div>


VueRouter的基本使用_第2张图片


拓展:组件存放问题

为什么将路由相关的文件放在 views目录呢?

这就得牵扯到我们的组件分类了

组件分类:.vue文件

  1. 页面组件: 配合路由使用的组件放在 views文件夹中
  2. 复用组件:展示数据或者使用率复用高的放在components文件夹中

分类目的:就是方便维护

你可能感兴趣的:(Vue,vue.js,javascript,前端)