vue-router学习

介绍

https://router.vuejs.org/zh/guide/

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

helloworld

vue-router 提供了一个全局组件 router-link (取代 a 标签)

• 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
• 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： 发现音乐

<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>

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

1.router-link-active

模糊匹配（用的多）

to=”/my” 可以匹配 /my /my/a /my/b ….

只要是以/my开头的路径 都可以和 to=”/my”匹配到

2.router-link-exact-active

精确匹配

to=”/my” 仅可以匹配 /my

路由

新增vue页面search.vue和home.vue。

新增router文件夹。

router/index.js

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

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ]
})

export default router

main.js

import router from './router/index'

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

App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

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

<style scoped>

</style>

导航

声明式导航是指在浏览器中，通过点击链接实现页面跳转的方式。‌ 例如，在普通网页中点击链接，或在Vue项目中点击，都属于声明式导航‌。

编程式导航：在浏览器中，调用API方法实现导航的方式，叫做编程式导航。如：普通网页中调用location.href跳转到新页面的方式，属于编程式导航。

自定义类名

我们可以在创建路由对象时，额外配置两个配置项即可。

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

查询参数传参

• 如何传参？

• 如何接受参数

  固定用法：$router.query.参数名

动态路由传参

• 配置动态路由

  动态路由后面的参数可以随便起名，但要有语义

  const router = new VueRouter({
    routes: [
      ...,
      { 
        path: '/search/:words', 
        component: Search 
      }
    ]
  })

• 配置导航链接

  to=”/path/参数值”

• 对应页面组件接受参数

  $route.params.参数名

  params后面的参数名要和动态路由配置的参数保持一致

动态路由参数的可选符

/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符”？”

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

查询参数传参 VS 动态路由传参

1. 查询参数传参 (比较适合传多个参数)

   1. 跳转：to=”/path?参数名=值&参数名2=值”
   2. 获取：$route.query.参数名

2. 动态路由传参 (优雅简洁，传单个参数比较方便)

   1. 配置动态路由：path: “/path/:参数名”
   2. 跳转：to=”/path/参数值”
   3. 获取：$route.params.参数名

   注意：动态路由也可以传多个参数，但一般只传一个

重定向

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

404

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

NotFind.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

模式设置

• hash路由(默认) 例如: http://localhost:8080/#/home
• history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

路由跳转

• path 路径跳转 （简易方便）
• name 命名路由跳转 (适合 path 路径长的场景)

path路径跳转

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

path路径跳转传参

query传参

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

接受参数的方式依然是：$route.query.参数名

动态路由传参

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

name命名路由跳转

特点：适合 path 路径长的场景

语法：

路由规则，必须配置name配置项

{ name: '路由名', path: '/path/xxx', component: XXX },

通过name来进行跳转

this.$router.push({
  name: '路由名'
})

query传参

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

动态路由传参

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})