登录
注册
首页 前端笔记 正文
  • 本文约878字，阅读需4分钟
  • 2466
  • 0

VueRouter路由的使用(5+2)

温馨提示：本文最后更新于2024年3月27日 20:48，若内容或图片失效，请在下方留言或联系博主。

VueRouter/路由 简而言之就是路径改变从而对应组件跟着切换的效果，只是切换组件 并不是重新渲染整个页面

5个基础步骤(固定)

1.下载：下载 VueRouter 模块到当前工程 版本我这个人推荐 3.6.5

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:router 
  router   // 简写
}).$mount('#app')

2个核心步骤

1. 建组件(一般都创建一个views目录)，配规则
const router = new VueRouter({    // 创建路由对象
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [  // 固定样式 route代表规则
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

1.1 记得引用 views目录中的 几个组件

1.3 在这里配置完结束后可能会提示以下内容，别怕，这是vue在提醒我们尽可能的起名字长一点 增强语义化，在组件中添加  name: 'FindMusic' 就解决了

VueRouter路由的使用(5+2)

2. 准备导航链接，配置路由出口(匹配的组件展示的位置)
2.1 在导航中的路径要和规则中的路径名保持一致格式如下：
<a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
2.2 路由出口 → 匹配的组件所展示的位置 它在哪，代表你写的组件 会在哪里显示出来
       
<router-view>  </router-view>

概括：

7个步骤：1.下载包 2.引入包 3.Vue.use 安装注册 4.创建路由对象 5.注册Vue实例 6.创建组件，配置规则，引用 (路径组件的匹配关系) 7.配导航，配置路由出口 router-view(组件的展示位置)

标签：前端笔记
评论