Vue-Router

kuma
57 阅读3分钟
  • Vue-Router
    • 单页应用程序
      • SPA -Single Page Application
      • 所有功能在一个Html页面上实现
      • 优点
        • 不整个刷新页面,每次请求仅获取需要的部分,用户体验更好
        • 数据传递容易,开发效率高
      • 缺点
        • 开发成本高(需要学习专门知识 - 路由)
        • 首次加载会比较慢一点,不利于seo
    • 多页面应用程序
      • MPA
    • 路由
      • 路由
        • 指的是A跟B的映射关系
      • 前端路由
        • 路径和组件的映射关系
        • 基本工作原理
          • 通过window.onhashchange监听hash值(location.hash)改变,切换组件
    • Vue-Router
      • 是vue官方的一个路由插件,是一个第三方包
      • vue-router集成了 路径 和 组件的切换匹配处理，我们只需要配置规则即可。
      • 组件的分类
        • src/views
          • 页面组件 - 页面展示 - 配合路由用
        • src/components
          • 复用组件 - 展示数据/常用于复用
      • Vue-Router的基本使用
        • 1. 下载vue-router模块到当前工程
          • vue2 不能使用最新版本的Vue-Router,需下载指定的V3.X.X版本
            • yarn add vue-router@3.5.3
        • 2. 在main.js中引入VueRouter函数
import VueRouter from 'vue-router'
        • 3. 添加到Vue.use()身上
          • – 帮你注册全局RouterLink和RouterView组件
Vue.use(VueRouter)
        • 4. 创建路由对象
const router = new VueRouter()
        • 5. 将路由对象注入到new Vue实例中
new Vue({
  router
})
        • 核心步骤
          • 6.配置路由规则
            • 导入组件
            • 配置路由规则
im
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      path: '/find',
      // 组件
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})
          • 7.指定路由出口 router- view
            • 组件在哪里显示
<div class="top">
  <!-- 路由的出口 -->
  <router-view></router-view> //指定路由出口
</div>
      • 路由的封装
        • 好处：拆分模块，利于维护
        • 1.src下新建文件router/index.js
import Vue from 'vue'
// 2. 导入VueRouter
import VueRouter from 'vue-router'

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

// 3. 使用vue插件  vue的插件想要生效必须调用一个方法  Vue.use(XXXX)
Vue.use(VueRouter)

// 4. 创建一个路由对象
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})

export default router
        • 2.main.js
import router from './router'

new Vue({
  // 5. 关联路由对象和vue实例 data methods
  render: (h) => h(App),
  router,
}).$mount('#app')
      • 声明式导航 - 导航链接
        • router-link
          • 可用组件router-link来替代a标签，能跳转能高亮
          • RouterLink会自动给当前导航添加两个类名
<!-- 
  RouterLink会自动给当前的链接添加两个类名
    router-link-active: 激活的导航链接   模糊匹配
    	to="/my" 可以匹配 /my /my/a /my/b ....
      
    router-link-exact-active:  激活的导航链接 精确匹配
    	to="/my" 仅可以匹配 /my

    exact: 必须要精确匹配
  -->
 <RouterLink to="/" exact>发现音乐</RouterLink>
<RouterLink to="/my">我的音乐</RouterLink>
<RouterLink to="/friend">朋友</RouterLink>
          • 修改RouterLink默认自带的类名
const router = new VueRouter({
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-avtive',
}
          1. vue-router提供了一个全局组件 router-link
          1. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
          1. router-link提供了声明式导航高亮的功能(自带类名)
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
.router-link-exact-active,
.router-link-active {
  background-color: #555 !important;
}
</style>
      • 声明式导航 - 导航链接
        • $route.query
          • 1.导航传值 路径?键=值&键=值 ,传给对应组件
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my?id=12345&name=BB">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
          • 2.接收传值
<template>
  <div>
    <h1>我的音乐</h1>
    <p>id --- {{ $route.query.id }}</p>
		<p>id --- {{ $route.query.name }}</p>
  </div>
</template>
        • $route.params
          • 1.导航传值 路径/值/值 ,传给对应组件
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my/12345/BB">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
          • 2.配置路由规则
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my/:id/:name',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})
          • 3.组件接收传值
<template>
  <div>
    <h1>我的音乐</h1>
    <p>id --- {{ $route.params.id }}</p>
 		<p>id --- {{ $route.params.name }}</p>
  </div>
</template>
      • 重定向
        • 匹配path后,强制跳转到path路径
          • l 网页打开url默认hash值是/路径
          • l redirect是设置要重定向到哪个路由路径
const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]
      • 404页面
        • 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面
        • 如果路由未命中任何规则, 给出一个兜底的404页面
        • 1.创建404组件
        • 2.index.js中配置路由规则
import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]
      • 模式设置
        • hash路由模式
        • history路由模式
//  /src/router/index.js   下
const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

\

      • 编程式导航
        • 用JS代码来进行跳转
this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
  	//或者
    name: "路由名"  // 需要在路由规则中添加name属性
})
        • 路由规则添加name属性
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
      name:"myFind"
    },
 
  ],
})
      • 路由跳转传参
        • 语法
          • query / params 任选 一个
this.$router.push({
    path: "路由路径"
  	//或者
    name: "路由名",
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值
<template>
  <div>
    <h1>我的音乐</h1>
    <p>id --- {{ $route.query.id }}</p>
 		<p>id --- {{ $route.params.id }}</p>
  </div>
</template>
          • ⚠️注意:使用path会自动忽略params
          • query 传参/ params传参的区别
            • params传参：是在内存中传参，刷新会丢失
            • query传参：是在地址栏传参，刷新还在
      • 路由嵌套
        • 一级路由下嵌套二级路由
        • 实现二级路由的步骤
          • 1.在src/views/文件夹下创建Second文件夹
          • 2.创建组件
          • 3.引入组件
          • 4.配置路由规则(在对应的一级路由规则下通过children添加二级路由规则)
const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]
          • 5.指定路由出口
//find组件
<div class="nav">
  <!-- 路由的出口 -->
  <router-view to="/find/recommend"></router-view> //指定路由出口
	<router-view to="/find/ranking"></router-view> //指定路由出口
	<router-view to="/find/songlist"></router-view> //指定路由出口
</div>

\

\

\

\

\

\

\

\

\

\

\

\

avatar
文章
阅读
粉丝